Nach Uhrzeit geordnet

Ein Programm sollte in der Reihenfolge laufen, in der die Bands spielen, aber in bands.js stehen die Bands in der Reihenfolge ihrer Anmeldung. Das Sortieren kennst du aus dem JavaScript-Kurs: sort() mit einer Vergleichsfunktion. Uhrzeiten sind Texte, also vergleiche sie mit localeCompare():

const nachUhrzeit = [...bands].sort((a, b) => a.uhrzeit.localeCompare(b.uhrzeit, "de"));

Texte werden Zeichen für Zeichen verglichen, die Uhrzeiten sortieren sich also richtig, solange alle dieselbe Form haben: "09:00" kommt vor "18:30", aber "9:00" käme danach, weil 9 nach 1 kommt. Unsere Uhrzeiten haben für die Stunde immer zwei Ziffern.

Warum [...bands]? sort() macht kein neues Array, es sortiert das Array selbst. Hier ist das bands, das die ganze App aus bands.js importiert. Eine Komponente, die es sortiert, würde die Reihenfolge für alle anderen Komponenten gleich mit ändern, nur dadurch, dass sie angezeigt wird. Komponenten ändern die Daten, die sie bekommen, nicht: Sie schauen sie nur an und zeigen sie. (In den Lektionen über State siehst du, dass React eine solche Änderung nicht einmal bemerken würde.) Sortiere also eine Kopie: Spread macht eine, und sort() sortiert nur die Kopie.

Die sortierte Kopie lässt sich dann filtern, und die Bands jedes Tages bleiben in der Reihenfolge der Uhrzeit. Auch andersherum geht es: filter() macht ein neues Array, sein Ergebnis darf also ohne Kopie sortiert werden. bands.filter(…).sort(…) ändert nur das neue Array.

Ein typischer Fehler ist bands.sort(…) ohne Kopie. Die Seite sieht vielleicht richtig aus, aber das Array in bands.js ist jetzt ebenfalls sortiert, und jeder andere Teil der App bekommt es in dieser Reihenfolge.