Фильмы из данных

Каждую неделю в кинотеатре идут другие фильмы. На старом сайте новый фильм означал: скопировать карточку в HTML и поменять тексты, причём три карточки должны были остаться одинаковыми. В React фильмы — это данные, а один компонент рисует карточку для каждого из них, как в уроке «Списки и условия».

Теперь Home.jsx начинается с данных: массив films, по одному объекту на фильм, в каждом есть id, название title, жанр genre, продолжительность length в минутах и описание description. Карточка — отдельный компонент, FilmCard в FilmCard.jsx, который получает фильм целиком в одном пропе, как в упражнении «Объекты и массивы» урока «Пропсы»:

export default function FilmCard({ film }) {
    return (
        <div className="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
            <h3 className="font-display text-xl font-bold text-night">
                {film.title}
            </h3>
            …
        </div>
    );
}

Строка под названием собирается из двух значений и текста: {film.genre} · {film.length} мин показывает Драма · 112 мин. Затем Home превращает массив в карточки с помощью map(), и у каждой карточки есть ключ — id фильма:

{films.map((film) => (
    <FilmCard key={film.id} film={film} />
))}

Фильмы новой недели теперь — просто новые данные, а карточки подстраиваются сами. Данные могли бы даже приходить из файла, как расписание в следующем упражнении.