Добавить css класс onClick к отдельным элементам, созданным путем сопоставления массива в React

Question

<div className="sub-nav">
    <ul>
        {props.data.map((item, index) => {
            return (
                <li key={index} className="sub-nav-item" >{item.name} </li>
            );
        })}
    </ul>
</div>

Привет! Я хочу добавить активный класс к отдельному li при нажатии, но я не могу заставить его работать с сопоставленными элементами, не добавляя его ко всем из них. Это часть компонента меню в проекте React. Спасибо!

Answer 1

Ниже приведена реализация хуков. Если вы используете класс, я думаю, вы можете унаследовать его от того же.

const [selectedItemIndex,setSelectedItemIndex] = useState(null);

     <div className="sub-nav">
                    <ul>
                        {props.data.map((item, index) => {
                            return (
                            <li key={index} onClick={()=>setSelectedItemIndex(index)} className={`sub-nav-item ${selectedItemIndex===index?'active':''}`} >{item.name} </li>
                            );
                        })}
                    </ul>
    </div>