Props übergeben

Das Programm steht fest! Jede Karte soll jetzt ihre eigene Band zeigen. Eine Komponente bekommt Daten von der Komponente, die sie verwendet, über Props, kurz für „properties“ (Eigenschaften). Du schreibst sie wie Attribute in HTML:

<BandKarte name="Nachtzüge" buehne="Hauptbühne" />
<BandKarte name="Mondkatzen" buehne="Zelt" />

React fasst alle Props einer Karte in einem Objekt zusammen und übergibt es der Funktion der Komponente als Argument. Der Parameter heißt meistens props, und die Komponente liest die Props daraus als Eigenschaften eines Objekts:

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

Die Funktion ist für jede Karte dieselbe, aber jeder Aufruf bekommt andere Props. Für die erste Karte ist props gleich { name: "Nachtzüge", buehne: "Hauptbühne" }, für die zweite { name: "Mondkatzen", buehne: "Zelt" }. Du kannst es selbst sehen: Setze console.log(props); in die Komponente, und die Konsole zeigt für jede Karte eine Zeile:

{ name: "Nachtzüge", buehne: "Hauptbühne" }
{ name: "Mondkatzen", buehne: "Zelt" }

Es ist dieselbe Idee wie bei den Parametern einer Funktion in JavaScript: Die Funktion wird einmal geschrieben, und wer sie aufruft, bestimmt, womit. Hier ist das der Elternteil (Parent): die Komponente, in deren JSX das <BandKarte … /> steht. Der Parent bestimmt, was jede Karte zeigt.

Die Namen der Props wählst du selbst. Achte nur darauf, dass der Parent und die Komponente sie gleich schreiben: name und Name sind zwei verschiedene Props.