Ошибка при попытке выписать ряд элементов с использованием map.filter для фильтрации моих результатов

Question

У меня есть этот компонент, который создает коллекцию тегов для использования в другом элементе компонентов.

Я пытаюсь записать параметры на основе фильтра, чтобы он выглядел примерно так:

<optgroup label "PlayerOnly"></optgroup>
<option value ="1" label="Fighter" />
<option value ="2" label="Wizard" />
<option value ="3" label="Theif" />
<optgroup label "MonsterOnly"></optgroup>
<option value ="4" label="Troll" />
<option value ="5" label="Giant" />
<option value ="6" label="Goblin" />

Он группирует их по полю с именем groupById.

Но когда я пытаюсь запустить его, я просто получаю эту ошибку:

Syntax error: Binding invalid left-hand side in function parameter list

Вот компонент:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const OptionList = () => {

    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                'https://localhost:44376/api/characters',
            );
            setData(result.data);
        };
        fetchData();
    }, []);

    return (
        <>
            <optgroup label="PlayerOnly"></optgroup>
            {data.filter((item => item.groupById == 7) => (
            <option key={index} value={item.id} label={item.name} />
            ))}
            <optgroup label="MonsterOnly"></optgroup>
            {data.filter((item => item.groupById == 11) => (
            <option key={index} value={item.id} label={item.name} />
            ))}
        </>

    );
}
export default OptionList;

Answer 1

{data.filter(item => item.groupById == 7).map((item, index) => (
  <option key={index} value={item.id} label={item.name} />
)}

Попробуйте, вы передаете функцию в качестве левого параметра для фильтрации, а не для повторения.