Cuando se representan todos los elementos de la lista, quiero que después de hacer clic, solo el elemento de la lista en el que se hizo clic haya cambiado su estilo.
const [currentStyle, setCurrentStyle] = useState(); array.map(val => (<li style={currentStyle}>{val.name}</li>)Le aconsejo que haga otro componente para sus artículos, de esa manera será más fácil administrar el estado de cada artículo.
por ejemplo :
function YourComponent() { ... const [currentStyle, setCurrentStyle] = useState(); ... array.map(val => (<ItemComponent style={currentStyle}>{val.name}</ItemComponent>) ... } function ItemComponent({style, children}) { const [changeStyle, setChangeStyle] = useState(false) return ( <li onClick={() => {setChangeStyle(true)}} style={changeStyle ? style : null}>{children}</li> ) }Jimmy ya compartió la mejor manera de hacerlo. pero si eres perezoso puedes hacer algo como.
Nota: Ambos enfoques son diferentes. Si administra eso a través de subcomponentes, tendrá que agregar lógica adicional para realizar un seguimiento de los elementos en los que se hizo clic en el padre. (Todavía recomendado)
Pero si usa este, puede hacer que los elementos en los que se hizo clic se rastreen en el componente mismo (clickedItems)
const [currentStyle, setCurrentStyle] = useState(); const [clickedItems, setClickedItems] = useState([]); array.map((val, index) => (<li onClick={() => setClickedItems(clickedItems.find(i => i===index) ? clickedItems : [...clickedItems, index])} style={clickedItems.find(i => i===index) ? currentStyle : null}>{val.name} </li>)