React: добавить класс по клику

Question

Имею следующий код:

export default function TaskList(){

    const[data, setData] = useState([]);
    const[expand, setExpand] = useState(false);

    useEffect(() => {
        fetch('/dash/task_list')
            .then((response) => response.json())
            .then((json) => setData(json));

    },[]);
    console.log(data)
    return(
        <div className='segments'>
                {
                    data.map((task, index) => (
                        <div onClick={() => setExpand(!expand)} className={`segment ${expand ? 'active' : ''}`}>
                            <a className='header'>{task.task_id}</a>
                            <div className='description'>{task.event_time}</div>
                        </div>
                    ))
                }
        </div>
    )
}

Пытаюсь добавить стиль по нажатию segment, на данный момент получается что класс active добавляется ко всем итемам в списке, в чем ошибка? мне нужно чтобы применялся только к тому итему на котором был клик

Answer 1

В вашем коде переменная состояния expand используется для вычисления атрибута className для всех тегов div, создаваемых функцией map.

Поэтому для каждого тега div должна быть определена отдельная переменная, вместо общей переменной expand.

Answer 2

У вас общее состояние для всех элементов. Если expand - true, то ВСЕ элементы с классом active

Вы можете

или создать отдельный компонент Segment, который будет хранить свое внутреннее состояние expand.
или в текущем состоянии expand устанавливать значение для КАЖДОГО отрисованного компонента Segment

export default function TaskList(){

    const[data, setData] = useState([]);
    const[expand, setExpand] = useState(false); //Ошибка здесь, общий стейт для всех .segment 

    useEffect(() => {
        fetch('/dash/task_list')
            .then((response) => response.json())
            .then((json) => setData(json));

    },[]);
    console.log(data)
    return(
        <div className='segments'>
                {
                    data.map((task, index) => (
                        <div onClick={() => setExpand(!expand)} className={`segment ${expand ? 'active' : ''}`}>
                            <a className='header'>{task.task_id}</a>
                            <div className='description'>{task.event_time}</div>
                        </div>
                    ))
                }
        </div>
    )
}

БЛОГ НА HUSL

React: добавить класс по клику

Ответы (2 шт):