The Films from Data

Every week, the cinema shows different films. On the old site, a new film meant copying a card in the HTML and changing its texts, and the three cards had to stay alike. In React, the films are data, and one component draws a card for each of them, as in the lesson Lists and Conditions.

Home.jsx now starts with the data: an array films, one object per film, each with an id, the title, the genre, the length in minutes and a description. The card is a component of its own, FilmCard in FilmCard.jsx, which gets the whole film in one prop, as in the exercise Objects and Arrays of the Props lesson:

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>
    );
}

The line under the title is put together from two values and some text: {film.genre} · {film.length} min shows Drama · 112 min. Then Home turns the array into cards with map(), and each card gets its key, the film's id:

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

A new week's films are now just new data, and the cards follow by themselves. The data could even come from a file, as the showtimes will in the next exercise.