Quiero alternar solo el último elemento de intervalo que dice "texto para alternar para {user.id}", solo quiero alternar este elemento para ese elemento li específico, no para todos los elementos li. Actualmente, como lo he configurado, alternará ese elemento de intervalo para todos los elementos li debido a cómo funciona el estado. Estaba pensando en pasar un índice a través de la función de mapa y hacer referencia al índice para alternar el elemento que quiero, pero ¿cómo puedo hacer eso? Debido a que el estado se establece para todos los elementos li, ¿hay una mejor manera de hacer esto en lugar de usar el estado?

Sé que con Vanilla JS podría usar getElementById y configurar el estilo para ocultar o bloquear. Pero con reaccionar no estaba seguro de la mejor manera de manejar esto, porque me enseñaron que queremos evitar las identificaciones cuando podemos reaccionar. Luego, en lo que respecta al uso de useRef(), no estaba seguro de que realmente funcionara aquí porque necesitaría crear referencias para cada elemento y no sé si puedo hacerlo dinámicamente o si esa sería la mejor práctica. ¿para esa materia?

¡Gracias!

 import React, { useState } from 'react'; const Users = [ { id: 1, name: 'Andy', age: 32 }, { id: 2, name: 'Bob', age: 30 }, { id: 3, name: 'Tom Hulk', age: 40 }, { id: 4, name: 'Tom Hank', age: 50 }, { id: 5, name: 'Audra', age: 30 }, { id: 6, name: 'Anna', age: 68 }, { id: 7, name: 'Tom', age: 34 }, { id: 8, name: 'Tom Riddle', age: 28 }, { id: 9, name: 'Bolo', age: 23 }, ]; function Test() { const [toggle, setToggle] = useState('none'); function toggleFunction () { toggle === 'none' ? setToggle('block') : setToggle('none') } return ( <div className="container"> <div className="user-list"> { Users.map((user) => ( <li key={user.id} className="user"> <button onClick={toggleFunction}>Button</button> <span className="user-id">{user.id}</span> <span className="user-name">{user.name}</span> <span className="user-age">{user.age} year old</span> <span style={{display: toggle}}>text to toggle for {user.id}</span> </li> )) } </div> </div> ); } export default Test;