Поиск в другом компоненте

Ещё одна пара компонентов, которым нужно одно и то же состояние: поле поиска в SearchBox и список участников в BandList. Пока вы печатаете, список должен показывать только подходящие группы. Сейчас поле управляется состоянием внутри SearchBox, и BandList его не видит. Ситуация та же, что с избранным, поэтому и решение то же: search поднимается в App, их ближайшего общего родителя.

Тогда SearchBox получает текст и функцию, которую нужно вызвать с новым текстом. Его поле остаётся управляемым, только теперь состоянием, которое живёт в App:

export default function SearchBox({ search, onSearchChange }) {
    return (
        <input
            className="search"
            placeholder="Найти группу"
            value={search}
            onChange={(event) => onSearchChange(event.target.value)}
        />
    );
}

App хранит состояние и передаёт его вниз вместе с функцией-сеттером: <SearchBox search={search} onSearchChange={setSearch} />. setSearch — такая же функция, как любая другая, поэтому её можно передать вниз как есть: когда поле меняется, SearchBox вызывает onSearchChange с новым текстом, и это setSearch из App.

А отфильтрованный список? Он вычисляется из bands и search, так что это тоже не состояние. App фильтрует группы при отрисовке и передаёт BandList только те, которые нужно показать. Вот та же идея с фильтром по дню:

const shownBands = bands.filter((band) => band.day === day);

Чтобы поиск не зависел от регистра букв, сравнивайте оба текста в нижнем регистре с помощью toLowerCase() из курса JavaScript: "Ночные поезда".toLowerCase() — это "ночные поезда".