Filmy z dat

Každý týden kino hraje jiné filmy. Na starém webu znamenal nový film zkopírovat kartu v HTML a změnit její texty a všechny tři karty musely zůstat stejně postavené. V Reactu jsou filmy data a jedna komponenta vykreslí kartu pro každý z nich, jako v lekci Seznamy a podmínky.

Uvod.jsx teď začíná daty: polem filmy s jedním objektem na film, každý s id, názvem v nazev, žánrem v zanr, délkou v minutách v delka a popisem v popis. Karta je samostatná komponenta, KartaFilmu v souboru KartaFilmu.jsx, která dostane celý film jako jedinou prop, jako ve cvičení Objekty a pole v lekci Props:

export default function KartaFilmu({ 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-noc">
                {film.nazev}
            </h3>
            …
        </div>
    );
}

Řádek pod názvem se skládá ze dvou hodnot a kousku textu: {film.zanr} · {film.delka} min ukáže Drama · 112 min. Uvod pak pole převede na karty pomocí map() a každá karta dostane svůj klíč, id filmu:

{filmy.map((film) => (
    <KartaFilmu key={film.id} film={film} />
))}

Filmy na další týden jsou teď jen nová data a karty se jim přizpůsobí samy. Data by se dokonce mohla načítat ze souboru, jako to v dalším cvičení udělá program.