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>