Tickets speichern

Buche einen Platz und klicke auf Ausführen: Dein Ticket ist weg, und der Platz ist wieder frei. State lebt nur, solange die App läuft. Um die Tickets zu behalten, brauchst du localStorage, und du hast dafür schon einen Hook: useLocalStorage steht in der Datei useLocalStorage.js, so wie du ihn in der Lektion Refs und eigene Hooks geschrieben hast. Er funktioniert wie useState, speichert den Wert aber zusätzlich unter einem Schlüssel und beginnt mit dem, was dort gespeichert ist. In Programm ändert sich also eine Zeile:

const [tickets, setTickets] = useLocalStorage("tickets", []);

Das ist alles. Die Platzwahl bekommt die Tickets weiter in ihren Props, und die Liste Deine Tickets zeigt sie weiter an: Keine von beiden muss wissen, woher die Tickets kommen. Belegte Plätze bleiben belegt, und die Liste Deine Tickets behält ihre Tickets auch nach dem Ausführen. In der Vorschau löscht der Button Gespeicherte Daten löschen in der Konsole sie.

Warum der Schlüssel tickets, wo die alte Website ihre Buchungen unter buchungen gespeichert hat? Unsere Tickets sehen anders aus: Sie behalten die ganze Vorstellung, während die alten Buchungen nur ihre vorstellungId hatten. Sobald deine React-App unter der Adresse der alten Website online ist, bekommt sie in deinem Browser denselben localStorage, mit allen Buchungen, die du beim Ausprobieren der alten Website gemacht hast. Unter dem Schlüssel buchungen würde die App sie als Tickets lesen, kein ticket.vorstellung darin finden und mit einem Fehler abbrechen. Unter einem neuen Schlüssel beginnt die App mit nichts Gespeichertem.

Stornieren. Eine Buchung, die du nicht mehr willst, sollte sich leicht stornieren lassen. Jedes Ticket bekommt einen Button Stornieren, und stornieren(id) macht mit filter() ein neues Array ohne dieses Ticket, wie in der Übung Etwas aus einem Array entfernen. Der Hook speichert das neue Array, und die Plätze sind wieder frei.