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 una revelación de spoiler.

Añade el estado booleano revealed, comenzando en false.
El botón (id="toggle") lo invierte en cada clic.
Cuando se haya revelado, 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>