Wahrheitswerte im State

Ein State, der true oder false ist, passt genau zu allem, was an oder aus ist: Details ein- oder ausgeblendet, eine Band unter den Favoriten oder nicht, ein Menü offen oder geschlossen.

const [detailsSichtbar, setDetailsSichtbar] = useState(false);

function umschalten() {
    setDetailsSichtbar(!detailsSichtbar);
}

return (
    <article className="karte">
        <h2>Blechroboter</h2>
        <button onClick={umschalten}>
            {detailsSichtbar ? "Details ausblenden" : "Details anzeigen"}
        </button>
        {detailsSichtbar && <p>Zelt, Samstag 21:00</p>}
    </article>
);

!detailsSichtbar ist das Gegenteil des aktuellen Werts: Aus false wird true, und aus true wird false. Ein Button öffnet also die Details, und derselbe Button schließt sie wieder.

Was die Seite zeigt, bestimmen die Bedingungen aus der Lektion Listen und Bedingungen: ? : wählt den Text des Buttons, und && zeigt den Absatz nur, solange detailsSichtbar den Wert true hat. Bei false ist der Absatz nicht versteckt: Er ist gar nicht auf der Seite.

So arbeiten React-Apps meistens. Der State sagt, wie die Dinge stehen, und das JSX beschreibt, wie die Seite in jedem Fall aussieht. Du fügst keine Elemente selbst hinzu und entfernst sie nicht. Du änderst den State, und React erledigt den Rest.

Ein Wahrheitswert kann auch eine Klasse wählen, damit CSS das Element anders gestaltet:

<article className={favorit ? "karte favorit" : "karte"}>

Gib Wahrheitswerten Namen, die sich mit Ja oder Nein beantworten lassen: detailsSichtbar, favorit, istOffen. Dann liest sich detailsSichtbar && … fast wie ein Satz.