Quiero crear un botón para mostrar y ocultar un div. En el primer div ( div1 ) tengo una tabla y en el segundo div ( div2 ) tengo un gráfico. Cuando un usuario hace clic en el botón (con el icono de la barra), debería ver el div2 (gráfico) y cuando el usuario vuelve a hacer clic, debería devolver div1 (tabla). ¿Cómo puedo hacerlo?
tablas.js
export function IncomeTables({firminfo, title, arr_number, financials, balance}) { ... ... return <Card> <div id="div1"> <Table> <head> <tr> <th colSpan="5">{title} <button style={{float:"right"}} className="btn btn-primary" ><FaChartBar/></button></th> </tr> ... </thead> ... </Table> </div> <div id="div2"> <BarChart> ... </BarChart> </div> </Card>Así es como lo haces:
export default function App() { let [show, setShow] = React.useState(false); return ( <div> {show ? <div>Hello</div> : <div>Another div</div>} <button onClick={() => { setShow(!show); }} > Click </button> </div> ); } Pero cuando, en lugar de div s, representa diferentes tipos de componentes, al cambiar a otro componente, el anterior se desmontará y todo el estado desaparecerá (debido a la reconciliación). En tales casos, es posible que desee almacenar el estado en el padre (por ejemplo, la aplicación), para que ese estado no se pierda.
O, alternativamente, puede cambiar la propiedad de display del div que desea mostrar/ocultar, según la variable de estado; en ese caso, el estado no se perderá, porque no está desmontando nada, solo cambiando una propiedad CSS.