Das Programm laden

Jetzt die Programmseite. Das Programm kommt aus programm.json, wie im Projekt zum Kinoprogramm, nur lädt es jetzt ein Effekt, wie in der Lektion Effekte. Es ist State, am Anfang ein leeres Array, und der Effekt mit den Abhängigkeiten [] lädt die Datei, wenn Programm erscheint:

const [vorstellungen, setVorstellungen] = useState([]);

useEffect(() => {
    async function vorstellungenLaden() {
        const antwort = await fetch("programm.json");
        setVorstellungen(await antwort.json());
    }
    vorstellungenLaden();
}, []);

In der Tabelle macht map() für jede Vorstellung eine Zeile, mit ihrer id als Schlüssel: vier Zellen mit dem Tag, der Uhrzeit, dem Film und dem Saal und eine fünfte mit dem Button Plätze wählen. Im Projekt Das Kino in Tailwind hat das Skript diesem Button seine Klassen mit button.className = "…" gegeben. In JSX schreibst du sie direkt an den Button, wie an jedes andere Element.

Jedes Mal, wenn du das Programm öffnest, erscheint Programm neu auf der Seite, also läuft sein Effekt wieder und lädt die Datei wieder. Wenn du zur Startseite gehst, nimmt React die Komponente von der Seite und ihren State gleich mit. Das ist hier in Ordnung: Die Datei ist klein, und das Programm könnte sich inzwischen geändert haben.

Während die Datei unterwegs ist, steht auf der Seite Lädt…, und wenn der Server mit einem Fehler antwortet, sagt die Seite das, wie die alte. Das sind zwei weitere State-Variablen, laedt und fehler, wie in der Lektion Effekte. Prüfe antwort.ok, bevor du die Daten liest.