así que soy nuevo en React y estoy tratando de aprender los conceptos básicos. Me quedé atascado en un punto en el que trato de mostrar/ocultar un elemento en una página. El problema es que cuando hago clic en Mostrar detalles, funciona, pero se debe hacer clic en Ocultar detalles 2 veces para hacer lo que se supone que debe hacer.
¿Puedes ayudarme a entender esto?
import React, { useState } from 'react' const Playground2 = () => { let visible = false; const [details, showDetails] = useState(); const [buttonText, changeButtonText] = useState("Show details"); const toggleVisibility = () => { if (visible) { showDetails(""); visible = false; console.log(visible); changeButtonText("Show details") } else { showDetails("Here are some details"); visible = true; console.log(visible); changeButtonText("Hide details"); } } return ( <> <section> <div className="container"> <h1>Visibility Toggle</h1> <button onClick={toggleVisibility}>{buttonText}</button> <p>{details}</p> </div> </section> </> ) } export default Playground2Debe usar el estado en su condición. Si declara una variable como la visible , esta se asignará en cada representación (cada vez que establezca el estado con changeButtonText o showDetails . Por lo tanto, cada vez se establecerá en false . Puede simplificar su componente haciendo lo siguiente:
import React, { useState } from 'react' const Playground2 = () => { const [visible, setVisible] = useState(); const toggleVisibility = () => { setVisible(prevState => !prevState) } const buttonText = visible ? 'Hide details' : 'Show details' const details = 'Here are some details' return ( <> <section> <div className="container"> <h1>Visibility Toggle</h1> <button onClick={toggleVisibility}>{buttonText}</button> {visible && <p>{details}</p>} </div> </section> </> ) } export default Playground2Bueno, resolvería su problema si también convierte la visibilidad en estado.
Lo que creo que sucede es que cuando hace clic en el botón, la variable de visibilidad se convierte en falsa pero el componente no se actualiza. Para que el componente se actualice, debe haber algún cambio en el estado.
Tal vez intente eso. Eso debería hacer el truco.
Sugerencia: Variables como carga, visibilidad, modal cerrado/abierto deben ser variables de estado.
Mueva let visible = false fuera del cuerpo del componente y esto funcionará como se esperaba, ya que está poniendo visible dentro del Componente, cada vez que el componente actualice false se almacenará en visible.
let visible = false const Playground 2 = () => {}