Alternar con estado

Parte de la sección Fundamentos del Journey de React de Coddy — lección 25 de 42.

El estado no es solo números. Un estado booleano es el conmutador estándar para mostrar y ocultar cosas:

const [isOpen, setIsOpen] = useState(false);

<button onClick={() => setIsOpen(!isOpen)}>Menu</button>
{isOpen ? <p>I am visible!</p> : null}

Dos trucos funcionando juntos:

setIsOpen(!isOpen): el ! invierte el booleano, por lo que un solo botón abre y cierra
{condition ? jsx : null}: renderizar null renderiza nada; el elemento no está oculto, no existe

Desafío

Intermedio

Crea un revelador de spoiler.

Añade un estado booleano revealed, comenzando en false.
El botón (id="toggle") cambia su valor en cada clic.
Cuando se revele, muestra un <p> con id="secret" y el texto The cake is real; de lo contrario renderiza null.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>