Umschalten mit State

Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 25 von 42.

State besteht nicht nur aus Zahlen. Ein boolean-State ist der Standard-Schalter zum Anzeigen und Verbergen von Elementen:

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

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

Zwei Tricks, die zusammenarbeiten:

setIsOpen(!isOpen): Das ! kehrt den Boolean-Wert um, sodass eine einzige Schaltfläche sowohl öffnet als auch schließt
{condition ? jsx : null}: Das Rendern von null rendert nichts; das Element ist nicht versteckt, es existiert gar nicht

Aufgabe

Mittel

Baue eine Spoiler-Enthüllung.

Füge einen booleschen State revealed hinzu, der mit false startet.
Der Button (id="toggle") schaltet ihn bei jedem Klick um.
Wenn enthüllt, zeige ein <p> mit id="secret" und dem Text The cake is real; andernfalls null rendern.

Probier es selbst

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