Basculer avec l'état

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 25 sur 42.

L'état ne se limite pas aux nombres. Un état boolean est le commutateur standard pour afficher et masquer des éléments :

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

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

Deux astuces qui fonctionnent ensemble :

setIsOpen(!isOpen) : le ! inverse le booléen, de sorte qu'un seul bouton ouvre et ferme à la fois
{condition ? jsx : null} : rendre null rend rien ; l'élément n'est pas masqué, il n'existe pas

Défi

Moyen

Créez un affichage de spoiler.

Ajoutez un état booléen revealed, initialisé à false.
Le bouton (id="toggle") le bascule à chaque clic.
Lorsqu'il est révélé, affichez un <p> avec id="secret" et le texte The cake is real ; sinon, affichez null.

Essayez vous-même

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