Así que he replicado mi problema en un nivel más pequeño para que sea más fácil trabajar con él. El objetivo es tener una función al hacer clic que muestre el contenido dentro de la columna que está oculta de forma predeterminada, idealmente esto se manejará configurando display: none y cambiando a display: flex. Tengo que usar un objeto, por lo tanto, lodash. No puedo usar document.getElement porque todos los componentes asignados comparten un nombre de clase común. Los datos provienen de una base de datos, por lo que la cantidad de columnas es desconocida y siempre cambia según los requisitos del usuario.
Supongo que estoy buscando un método para apuntar al nombre de clase del div/etiqueta de la iteración del mapa donde está el clic para ese contenedor. ¡Cualquier ayuda es apreciada!
import _ from "lodash" import React from 'react' const dummyData = { columnOne: "item one", columnTwo: "item two", columnThree: "item three" } function TestPage() { return ( _.map(dummyData, (data, key) => { return ( <> <div className="column-container"> <p className="heading">{key}</p> <div className="show-content-btn">V</div> //button to toggle content visibility </div> <p className="content">{data}</p> //content to be hidden/shown </> ) } ) ) } export default TestPageUna forma de hacer esto es crear un componente separado para HTML que regrese de la función de mapa y maneje el estado en él. Me gusta:
import _ from "lodash"; import React from "react"; const dummyData = { columnOne: "item one", columnTwo: "item two", columnThree: "item three" }; function Data({ id, data }) { const [show, setShow] = React.useState(false); return ( <> <div className="column-container"> <p className="heading">{id}</p> <div className="show-content-btn"> <button onClick={() => setShow(!show)}>V</button> </div> </div> {show && <p className="content">{data}</p>} </> ); } function TestPage() { return _.map(dummyData, (data, key) => { return <Data key={key} id={key} data={data} />; }); } export default TestPage;