<div> {arrayOfDetails.map((deets, index) => ( <div> <h1>{deets.firstName + ' ' + deets.lastName}</h1> <div> <div id={index}> {listOfGrades(deets.grades)} </div> </div> <button type="button" data-toggle="button" aria-pressed="false" autoComplete="off">+</button> </div> ))} </div>Estoy mapeando a través de una matriz desde un JSON. ¿Cómo obtengo el botón para alternar la visualización del div que contiene listOfGrades con la ID?
Entonces, 20 botones para 20 divs de listOfGrades, y cada botón debe alternar su propio div correspondiente.
¡Gracias!
agregue una propiedad isActive a cada objeto de datos.
por ejemplo :
setArrayOfDetails(dataComingFromServer.map(item=>({...item,isActive:true})))cree la devolución de llamada para alternar el estado activo:
const toggleActive=(index)=>{ const newState=[...arrayOfDetails] newState[i].isActive=!newState[i].isActive setArrayOfDetails(newState) }ahora renderice los elementos que están activos:
<div> {arrayOfDetails.map((deets, index) => ( <div> <h1>{deets.firstName + ' ' + deets.lastName}</h1> <div> {deets.isActive && <div id={index}> {listOfGrades(deets.grades)} </div>} </div> <button type="button" data-toggle="button" aria-pressed="false" autoComplete="off" onClick={()=>toggleActive(index)}>+</button> </div> ))}Puede agregar una propiedad en sus datos que realiza un seguimiento del estado hidden . Luego, en el botón, haga clic en una fila, busque el índice y cambie la propiedad hidden para esa fila.
const [deets, setDeets] = useState([]); // Set initial Value here with hidden property for each item in array const toggleElement = (idx) => { let newDeets = [...deets]; deets[idx].hidden = !deets[idx].hidden; setDeets(newDeets); }; return ( <div> {arrayOfDetails.map((deets, index) => ( <div> <h1>{deets.hidden ? "" : `${deets.firstName} ${deets.lastName}`}</h1> <div> {deets.hidden ? ( "" ) : ( <div id={index}>{listOfGrades(deets.grades)}</div> )} </div> <button type="button" data-toggle="button" aria-pressed="false" autoComplete="off" onClick={() => toggleElement(index)} > + </button> </div> ))} </div> );