Objekty a pole

Aplikace málokdy píšou data přímo do JSX. Data bývají v poli objektů, načtená ze serveru nebo uložená v souboru, jako kapely festivalu na začátku App.jsx:

const kapely = [
    { id: 1, nazev: "Noční vlaky", podium: "Hlavní pódium", den: "pátek", cas: "20:00", zanr: "rock" },
    { id: 2, nazev: "Měsíční kočky", podium: "Stan", den: "pátek", cas: "18:30", zanr: "pop" },
    // …
];

Props mohou být hodnoty z pole: nazev={kapely[0].nazev}. S více údaji je ale každá karta dlouhá. Prop může být jakákoli hodnota, i celý objekt, takže kapelu můžete předat jako jedinou prop:

<KartaKapely kapela={kapely[0]} />

Karta pak bere prop kapela a čte vlastnosti kapely:

export default function KartaKapely({ kapela }) {
    return (
        <article className="karta">
            <h3>{kapela.nazev}</h3>
            <p>{kapela.zanr}</p>
        </article>
    );
}

Který způsob je lepší? Samostatné props jako nazev a podium hned ukazují, co komponenta potřebuje, a fungují s jakýmikoli daty, i s textem napsaným přímo v JSX. Jeden objekt je kratší, když data už objekt jsou a komponenta potřebuje většinu jeho údajů. V kódu v Reactu uvidíte obojí.

Prop může být i pole. Komponenta se seznamem pódií je pak může ukázat oddělená čárkami, pomocí join():

<SeznamPodii podia={["Hlavní pódium", "Stan", "Lesní scéna"]} />

export default function SeznamPodii({ podia }) {
    return <p>Pódia: {podia.join(", ")}</p>;
}

Pódia: Hlavní pódium, Stan, Lesní scéna

Psát kapely[0], kapely[1] a tak dál pro každou kartu je zdlouhavé, a když přibude kapela, musíte přidat řádek. V další lekci, Seznamy a podmínky, uvidíte, jak udělat kartu pro každý prvek pole najednou. Zatím karty pište jednu po druhé.