Plätze wählen

Ein Klick auf Plätze wählen öffnet die Platzwahl. Sie ist eine eigene Komponente, Platzwahl, und der Editor hat sie in Platzwahl.jsx schon bereit: eine Karte mit einer Überschrift und einem leeren Raster. Sie bekommt die gewählte Vorstellung in der Prop vorstellung. Welche Vorstellung gewählt ist, ist State von Programm, gewaehlt: am Anfang null, wenn es keine gibt, und nach einem Klick auf den Button einer Vorstellung ihr Objekt. Die Platzwahl wird nur gezeigt, wenn es eine gibt, mit &&:

{gewaehlt !== null && (
    <Platzwahl key={gewaehlt.id} vorstellung={gewaehlt} />
)}

Der Schlüssel steht aus demselben Grund da wie bei den Karteikarten im Abschlussprojekt des React-Kurses. Die Platzwahl merkt sich, welche Plätze der Besucher auswählt. Wählt er eine andere Vorstellung, würde React dieselbe Platzwahl mit anderen Props behalten, und die für Freitag gewählten Plätze blieben auch am Samstag gewählt. Mit einem anderen Schlüssel für jede Vorstellung erzeugt React eine neue Platzwahl, in der nichts gewählt ist.

Die Plätze. Oben in Platzwahl.jsx enthält das Array plaetze die Namen aller 40 Plätze, von A1 bis E8, mit zwei Schleifen erzeugt wie im alten Skript. Im Raster macht map() daraus Buttons. Ein verkaufter Platz, also einer in vorstellung.belegt, ist deaktiviert und bekommt die Klasse belegt. Ein Platz, den der Besucher auswählt, bekommt die Klasse gewaehlt. Ein Platz kann mehrere Klassen haben, deshalb ist className diesmal ein Template-Literal: immer platz, und jede der beiden anderen oder nichts, mit dem Bedingungsoperator:

className={`platz ${istBelegt(platz) ? "belegt" : ""} ${ausgewaehlt.includes(platz) ? "gewaehlt" : ""}`}

Für einen freien Platz, der nicht ausgewählt ist, ergibt das "platz ", mit zwei Leerzeichen am Ende, was nicht schadet: Leerzeichen trennen nur Klassen.

Die ausgewählten Plätze sind ein Array im State, ausgewaehlt, am Anfang leer. Ein Klick auf einen Platz fügt ihn mit Spread hinzu oder nimmt ihn mit filter() heraus, wenn er schon ausgewählt ist, wie in den Übungen Etwas zu einem Array hinzufügen und Etwas aus einem Array entfernen der Lektion State. Unter dem Raster zeigt die Platzwahl, wie viele Plätze ausgewählt sind und was sie kosten. Achte dabei auf eine Kleinigkeit: In gesamt: {ausgewaehlt.length * vorstellung.preis} € stehen die geschweiften Klammern für den Wert, und das € dahinter ist einfach ein Zeichen des Textes.