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

Erstelle eine Spoiler-Aufdeckung.

Füge einen booleschen Zustand revealed hinzu, der mit false beginnt.
Die Schaltfläche (id="toggle") kehrt ihn bei jedem Klick um.
Wenn er aufgedeckt ist, zeige ein <p> mit id="secret" und dem Text The cake is real an; andernfalls rendere null.

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>