Objekte und Arrays

Apps schreiben ihre Daten selten direkt ins JSX. Die Daten stehen meist in einem Array von Objekten, das von einem Server geladen oder in einer Datei gehalten wird, wie die Bands des Festivals oben in App.jsx:

const bands = [
    { id: 1, name: "Nachtzüge", buehne: "Hauptbühne", tag: "Freitag", uhrzeit: "20:00", genre: "Rock" },
    { id: 2, name: "Mondkatzen", buehne: "Zelt", tag: "Freitag", uhrzeit: "18:30", genre: "Pop" },
    // …
];

Props können Werte aus dem Array sein: name={bands[0].name}. Aber bei mehr Feldern wird jede Karte lang. Eine Prop kann jeder Wert sein, auch ein ganzes Objekt, du kannst die Band also als einzige Prop übergeben:

<BandKarte band={bands[0]} />

Die Karte nimmt dann die Prop band entgegen und liest die Eigenschaften der Band:

export default function BandKarte({ band }) {
    return (
        <article className="karte">
            <h3>{band.name}</h3>
            <p>{band.genre}</p>
        </article>
    );
}

Welcher Weg ist besser? Einzelne Props wie name und buehne zeigen sofort, was die Komponente braucht, und sie funktionieren mit beliebigen Daten, auch mit Text, der direkt im JSX steht. Ein einzelnes Objekt ist kürzer, wenn die Daten schon ein Objekt sind und die Komponente die meisten seiner Felder braucht. Du wirst beides in React-Code sehen.

Auch ein Array kann eine Prop sein. Eine Komponente mit einer Liste von Bühnen kann sie zum Beispiel mit join() durch Kommas getrennt anzeigen:

<BuehnenListe buehnen={["Hauptbühne", "Zelt", "Waldbühne"]} />

export default function BuehnenListe({ buehnen }) {
    return <p>Bühnen: {buehnen.join(", ")}</p>;
}

Bühnen: Hauptbühne, Zelt, Waldbühne

Für jede Karte bands[0], bands[1] und so weiter zu schreiben ist mühsam, und wenn eine Band dazukommt, musst du eine Zeile ergänzen. In der nächsten Lektion siehst du, wie du für jedes Element eines Arrays eine Karte erzeugst. Schreibe die Karten vorerst einzeln.