Hledání v jiné komponentě

Další dvojice komponent, které potřebují stejný stav: textové pole pro hledání v PoleHledani a program v SeznamKapel. Během psaní má seznam ukazovat jen kapely, které hledání odpovídají. Teď textové pole řídí stav v PoleHledani a SeznamKapel na něj nevidí. Je to stejná situace jako u oblíbených kapel, a tak má i stejné řešení: hledani se přesune výš, do App, jejich nejbližšího společného rodiče.

PoleHledani pak dostane text a funkci, kterou zavolá s novým textem. Jeho textové pole zůstane řízené, jen teď stavem, který je v App:

export default function PoleHledani({ hledani, onZmenitHledani }) {
    return (
        <input
            className="hledani"
            placeholder="Hledat kapelu"
            value={hledani}
            onChange={(event) => onZmenitHledani(event.target.value)}
        />
    );
}

App drží stav a předá ho dolů spolu s jeho funkcí set…: <PoleHledani hledani={hledani} onZmenitHledani={setHledani} />. setHledani je funkce jako každá jiná, takže ji můžete předat dolů, tak jak je: když se textové pole změní, zavolá PoleHledani funkci onZmenitHledani s novým textem, a to je setHledani komponenty App.

A vyfiltrovaný seznam? Ten se spočítá z kapely a hledani, takže ani on není stav. App kapely vyfiltruje při vykreslení a komponentě SeznamKapel předá jen ty, které má ukázat. Tady je stejný nápad s filtrem podle dne:

const zobrazeneKapely = kapely.filter((kapela) => kapela.den === den);

Aby hledání nebralo ohled na velká písmena, porovnejte oba texty malými písmeny, pomocí toLowerCase() z kurzu JavaScriptu: "Noční vlaky".toLowerCase() je "noční vlaky".