Attiva/disattiva con lo stato

Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 25 di 42.

Lo stato non è fatto solo di numeri. Uno stato booleano è l’interruttore standard per mostrare e nascondere elementi:

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

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

Due trucchi che funzionano insieme:

setIsOpen(!isOpen): ! inverte il booleano, quindi un solo pulsante apre e chiude
{condition ? jsx : null}: renderizzare null non renderizza nulla; l'elemento non è nascosto, non esiste

Sfida

Medio

Crea un pulsante per rivelare uno spoiler.

Aggiungi uno stato booleano revealed, inizialmente false.
Il pulsante (id="toggle") lo inverte a ogni clic.
Quando è rivelato, mostra un <p> con id="secret" e il testo The cake is real; altrimenti visualizza null.

Provalo tu

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