Einen Tag wählen

Als Nächstes kommen die Tag-Buttons. Ihr JSX liegt fertig in Tagesknoepfe.jsx, und sie brauchen zweierlei: welcher Tag gewählt ist, um ihn in Gold zu zeigen, und eine Möglichkeit, einen anderen zu wählen. Den gewählten Tag braucht aber auch die Tabelle, die nur die Vorstellungen dieses Tages zeigt. Zwei Komponenten brauchen denselben State, also wandert er zu ihrem nächsten gemeinsamen Elternelement, wie in der Lektion State teilen. Die Tabelle steht direkt in Programm, deshalb lebt der State tag dort, am Anfang "alle", und Tagesknoepfe bekommt ihn in seinen Props, zusammen mit der Funktion, die ihn ändert:

<Tagesknoepfe tag={tag} beiTagWaehlen={setTag} />

Welche Vorstellungen die Tabelle zeigt, ist kein eigener State: Das wird bei jedem Rendern aus vorstellungen und tag berechnet, und die Tabelle macht ihre Zeilen aus angezeigt statt aus vorstellungen:

let angezeigt = vorstellungen;
if (tag !== "alle") {
    angezeigt = vorstellungen.filter((vorstellung) => vorstellung.tag === tag);
}

Der goldene Button. Im Projekt Das Kino in Tailwind hat das Skript die Klasse aktiv von Button zu Button verschoben. In React berechnet jedes Rendern die Klassen aller Buttons neu aus dem State. Der Button des gewählten Tages bekommt wochentag aktiv, die anderen nur wochentag, mit dem Bedingungsoperator in className:

className={tag === "Freitag" ? "wochentag aktiv" : "wochentag"}

Die drei Tages-Buttons unterscheiden sich nur im Tag, deshalb können sie mit map() aus einem Array kommen: const tage = ["Freitag", "Samstag", "Sonntag"]; über der Komponente, und der Button Alle Tage steht für sich davor. Der Schlüssel jedes Buttons ist sein Tag.

Die Klassen wochentag und aktiv bleiben in style.css, wie im Tailwind-Projekt. JSX könnte aber auch zwischen ganzen Mengen von Tailwind-Klassen wählen, etwa "bg-gold text-nacht" und "bg-white": Das Skript hat zu den Klassen, die ein Button schon hatte, eine weitere hinzugefügt, der Bedingungsoperator aber gibt jedem Button nur eine der Mengen, sodass sie sich nie um den Hintergrund streiten.