Eine einzige Quelle der Wahrheit

Deine App hat jetzt mehrere Werte im State, und jeder von ihnen lebt an genau einer Stelle: favoriten und suche in App. Jede Komponente, die sie zeigt, bekommt sie als Props, und jede Änderung läuft über eine Funktion, die App nach unten gegeben hat. Das meint eine einzige Quelle der Wahrheit (one source of truth): Jedes Datum wird einmal gespeichert, und alles andere wird daraus gelesen oder berechnet. Wenn der Nutzer eine Band mit einem Stern markiert, ändern sich der Stern, die Kopfzeile und das Programm gemeinsam, weil sie alle aus denselben favoriten kommen.

Wenn du ein Feature hinzufügst, stelle drei Fragen:

1. Was ändert der Nutzer? Das ist State.
2. Welche Komponenten brauchen es? Der State kommt in ihren nächsten gemeinsamen Parent und geht als Props an sie nach unten, zusammen mit einer Funktion, die ihn ändert.
3. Was lässt sich aus dem berechnen, was du schon hast? Berechne es beim Rendern und speichere es nicht.

Eine Liste kann mehrere Filter nacheinander durchlaufen. Mit let beginnt die Liste als Ergebnis eines Filters, und ein if filtert sie noch einmal:

let gezeigteBands = bands.filter((band) => band.buehne === buehne);
if (nurFreitag) {
    gezeigteBands = gezeigteBands.filter((band) => band.tag === "Freitag");
}

Manchmal müssen Daten viele Ebenen nach unten, durch Komponenten, die sie selbst nicht verwenden und nur weitergeben. Dafür hat React den Kontext (context), den eine Komponente tief unten lesen kann, ohne dass ihre Parents ihn weiterreichen. In Apps von der Größe deiner sind Props einfacher und klarer.