soy nuevo aqui. Tengo un problema con una tarea. Quiero un botón que si lo presionas oculta algo de contenido, una cadena en este caso. Si el contenido está oculto, el botón debe cambiar el texto dentro de él, y debe decir "mostrar" y en lugar de ocultar muestra el contenido previamente oculto. Si el contenido ya se muestra, el texto del botón será "ocultar". No entiendo cómo usar la declaración if
...
import React { useState } from "react"; function App() { const [hideText, setHideText] = useState(false); const onClick = () => setHideText(false); return ( <div> <button onClick={onClick}>Click me</button> {hideText ? <Text /> : null} </div> ); } const Text = () => <div>I will disappear, true Magic</div>; export default App;...
import React { useState } from "react"; function App() { const [isVisible, setVisible] = useState(true); const onClick = () => setVisible(!isVisible); return ( <div> <button onClick={onClick}>{isVisible? 'Hide' : 'Show'}</button> {isVisible? <Text /> : null} </div> ); } const Text = () => <div>I will disappear, true Magic</div>; export default App;No sé si entendí bien tus necesidades. Cambié el nombre de la variable para que sea más significativo :) Ahora el botón muestra Hide cuando el texto está visible y Show cuando está oculto. Al hacer clic en el botón cambia el estado.
import React { useState } from "react"; function App() { const [isTextHidden, setTextHidden] = useState(true); const onClick = () => setTextHidden(!isTextHidden); return ( <div> <button onClick={onClick}>{isTextHidden ? 'Show' : 'Hide'}</button> {!textHidden ? <Text /> : null} </div> ); } const Text = () => <div>I will disappear, true Magic</div>; export default App;