يمكنك تغيير بنية الشيفرة لديك وتمرير حالة العناصر بشكل مشروط ضمن الخطّاف useState وبالتالي يصبح تغيير الصفوف أكثر مرونة للعنصر الواحد بالشكل التالي:
import React, { useState } from 'react';
function ListItem(props) {
return (
<li className={props.active ? 'active' : ''} onClick={props.onClick}>{props.value}</li>
);
}
function List() {
const [activeItem, setActiveItem] = useState(null);
const items = [1, 2, 3, 4, 5, 6, 7, 8];
const handleItemClick = (item) => {
setActiveItem(item === activeItem ? null : item);
}
return (
<ul>
{items.map((item) =>
<ListItem key={item.toString()} value={item} active={item === activeItem} onClick={() => handleItemClick(item)} />
)}
</ul>
);
}
export default List;