Eine Suche in einer anderen Komponente

Noch ein Paar von Komponenten, die denselben State brauchen: ein Suchfeld in Suchfeld und das Programm in BandListe. Beim Tippen soll die Liste nur die passenden Bands zeigen. Im Moment wird das Feld von State in Suchfeld gesteuert, und BandListe kann ihn nicht sehen. Es ist dieselbe Lage wie bei den Favoriten, also gilt dieselbe Lösung: suche wandert nach oben in App, ihren nächsten gemeinsamen Parent.

Suchfeld bekommt dann den Text und eine Funktion, die es mit dem neuen Text aufruft. Sein Feld bleibt gesteuert, nur jetzt von State, der in App lebt:

export default function Suchfeld({ suche, beiSucheAendern }) {
    return (
        <input
            className="suche"
            placeholder="Nach einer Band suchen"
            value={suche}
            onChange={(event) => beiSucheAendern(event.target.value)}
        />
    );
}

App hält den State und gibt ihn zusammen mit seiner Setter-Funktion nach unten: <Suchfeld suche={suche} beiSucheAendern={setSuche} />. setSuche ist eine Funktion wie jede andere und kann deshalb unverändert weitergegeben werden: Ändert sich das Feld, ruft Suchfeld beiSucheAendern mit dem neuen Text auf, und das ist setSuche von App.

Und die gefilterte Liste? Sie wird aus bands und suche berechnet, ist also auch kein State. App filtert die Bands beim Rendern und gibt BandListe nur die, die sie zeigen soll. Hier dieselbe Idee mit einem Filter nach Tag:

const gezeigteBands = bands.filter((band) => band.tag === tag);

Um Groß- und Kleinschreibung bei der Suche zu ignorieren, vergleichst du beide Texte in Kleinbuchstaben, mit toLowerCase() aus dem JavaScript-Kurs: "Nachtzüge".toLowerCase() ist "nachtzüge".