Eine Liste von Karten

map() kann Daten auch in Komponenten verwandeln, nicht nur in li-Elemente. In der Lektion über Props hast du für jede Band eine eigene BandKarte geschrieben. Bei fünf Bands sind das fünf Zeilen, bei fünfzig wären es fünfzig, und jede neue Band in den Daten bräuchte eine weitere. Ein einziges map() zeigt sie alle an:

{bands.map((band) => (
    <BandKarte key={band.id} band={band} />
))}

Für jede Band gibt map() eine BandKarte zurück und übergibt ihr die Band in den Props. Der Key gehört an das Element, das map() zurückgibt: hier an die BandKarte. Die Karten sind die Einträge der Liste, nicht die article-Elemente in ihnen.

Die Daten liegen jetzt in einer eigenen Datei, bands.js. Das ist eine gewöhnliche JavaScript-Datei ohne JSX, die das Array exportiert: export const bands = [ … ];. App.jsx importiert es mit einem benannten Import, wie du ihn aus der Lektion über Komponenten kennst: import { bands } from "./bands.js";. Liegen die Daten in einer eigenen Datei, bleiben die Komponenten kurz, und mehrere Komponenten können dieselben Daten importieren.

Typische Fehler:

• Der Key steht in BandKarte, am article. React braucht den Key an den Einträgen der Liste, und in BandKarte gibt es keine Liste, nur ein einzelnes article. Die Konsole warnt weiter.
• Der Key wird in BandKarte gelesen. key gehört nicht zu den Props, also bekommt function BandKarte({ key }) den Wert undefined, und die Konsole warnt, dass key keine Prop ist. Braucht die Karte die Id, hat sie band.id.