Filme aus Daten

Jede Woche zeigt das Kino andere Filme. Auf der alten Website hieß ein neuer Film: eine Karte im HTML kopieren und ihre Texte ändern, und die drei Karten mussten gleich bleiben. In React sind die Filme Daten, und eine Komponente zeichnet für jeden eine Karte, wie in der Lektion Listen und Bedingungen.

Startseite.jsx beginnt jetzt mit den Daten: einem Array filme, ein Objekt pro Film, jeweils mit einer id, dem titel, dem genre, der laenge in Minuten und einer beschreibung. Die Karte ist eine eigene Komponente, FilmKarte in FilmKarte.jsx, die den ganzen Film in einer einzigen Prop bekommt, wie in der Übung Objekte und Arrays der Lektion Props:

export default function FilmKarte({ 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-nacht">
                {film.titel}
            </h3>
            …
        </div>
    );
}

Die Zeile unter dem Titel setzt sich aus zwei Werten und etwas Text zusammen: {film.genre} · {film.laenge} Min. zeigt Drama · 112 Min.. Dann macht Startseite mit map() aus dem Array Karten, und jede Karte bekommt ihren Schlüssel, die id des Films:

{filme.map((film) => (
    <FilmKarte key={film.id} film={film} />
))}

Die Filme einer neuen Woche sind jetzt einfach neue Daten, und die Karten folgen von selbst. Die Daten könnten sogar aus einer Datei kommen, wie das Programm in der nächsten Übung.