Выбор мест

Нажатие на «Выбрать места» открывает выбор мест. Это отдельный компонент, SeatPicker, и он уже ждёт вас в SeatPicker.jsx: карточка с заголовком и пустой сеткой. Он получает выбранный сеанс в пропе showtime. Какой сеанс выбран — это состояние Showtimes, chosen: сначала null, то есть сеанса нет, а после нажатия на кнопку — объект сеанса. Выбор мест показывается, только когда сеанс есть, с помощью &&:

{chosen !== null && (
    <SeatPicker key={chosen.id} showtime={chosen} />
)}

Ключ нужен по той же причине, что и у карточек в итоговом проекте курса React. Выбор мест запоминает, какие места выбрал посетитель. Когда посетитель выберет другой сеанс, React оставил бы тот же SeatPicker с другими пропсами, и места, выбранные на пятницу, остались бы выбранными на субботу. С отдельным ключом для каждого сеанса React создаёт новый компонент, в котором ничего не выбрано.

Места. В начале SeatPicker.jsx массив seats содержит названия всех 40 мест, от A1 до E8, созданные двумя циклами, как в старом скрипте. В сетке map() превращает их в кнопки. Проданное место, то есть то, что есть в showtime.taken, отключено и получает класс taken. Место, которое выбрал посетитель, получает класс selected. У места может быть несколько классов, поэтому на этот раз className — шаблонная строка: seat всегда, а каждый из двух других классов — или ничего, с условным оператором:

className={`seat ${isTaken(seat) ? "taken" : ""} ${selected.includes(seat) ? "selected" : ""}`}

Для свободного места, которое не выбрано, получится "seat " с двумя пробелами на конце, и это не мешает: пробелы только разделяют классы.

Выбранные места — массив в состоянии, selected, сначала пустой. Нажатие на место добавляет его с помощью spread или убирает через filter(), если оно уже выбрано, как в упражнениях «Добавление в массив» и «Удаление из массива» урока «Состояние». Под сеткой выбор мест показывает, сколько мест выбрано и сколько они стоят. Обратите внимание на запись итого: {selected.length * showtime.price} ₽: фигурные скобки в JSX вставляют значение, а ₽ — просто символ текста после них. Это не шаблонная строка: шаблонные строки бывают только между обратными кавычками.