Alternar com Estado

Parte da seção Fundamentos do Journey de React da Coddy — lição 25 de 42.

O estado não é apenas números. Um estado boolean é o alternador padrão para mostrar e ocultar coisas:

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

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

Dois truques funcionando juntos:

setIsOpen(!isOpen): o ! inverte o booleano, de modo que um único botão abre e fecha
{condition ? jsx : null}: renderizar null renderiza nada; o elemento não fica oculto, ele simplesmente não existe

Desafio

Médio

Crie um revelador de spoiler.

Adicione o estado booleano revealed, iniciando como false.
O botão (id="toggle") alterna o valor a cada clique.
Quando revelado, mostre um <p> com id="secret" e o texto The cake is real; caso contrário, renderize null.

Experimente você mesmo

<!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>