Выбор дня

Дальше — кнопки дней. Их JSX готов в DayButtons.jsx, и им нужно две вещи: какой день выбран, чтобы показать его золотым, и способ выбрать другой. Но выбранный день нужен и таблице, которая показывает сеансы только этого дня. Двум компонентам нужно одно и то же состояние, поэтому оно поднимается к ближайшему общему родителю, как в уроке «Общее состояние». Таблица находится прямо в Showtimes, поэтому состояние day живёт там, сначала "all", а DayButtons получает его в пропсах вместе с функцией, которая его меняет:

<DayButtons day={day} onSelectDay={setDay} />

Какие сеансы показывает таблица — это не отдельное состояние: оно вычисляется из showtimes и day при каждой отрисовке, и строки таблица делает из shown, а не из showtimes:

let shown = showtimes;
if (day !== "all") {
    shown = showtimes.filter((showtime) => showtime.day === day);
}

Золотая кнопка. В проекте «Кинотеатр на Tailwind» скрипт переносил класс active с кнопки на кнопку. В React при каждой отрисовке классы всех кнопок вычисляются заново по состоянию. Кнопка выбранного дня получает day active, остальные — просто day, с условным оператором в className:

className={day === "Пятница" ? "day active" : "day"}

Три кнопки дней отличаются только днём, поэтому их можно сделать из массива с помощью map(): const days = ["Пятница", "Суббота", "Воскресенье"]; над компонентом, а кнопка «Все дни» стоит отдельно, перед ними. Ключ каждой кнопки — её день.

Классы day и active остаются в style.css, как в проекте с Tailwind. Но JSX мог бы выбирать и между целыми наборами классов Tailwind, например "bg-gold text-night" и "bg-white": скрипт добавлял класс к тем, что у кнопки уже были, а условный оператор даёт каждой кнопке только один из наборов, поэтому они никогда не спорят из-за фона.