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>