Zusammenfassung

In dieser Lektion hast du gelernt:

• map() verwandelt ein Array aus Daten in ein Array aus Elementen, und React zeigt ein Array in geschweiften Klammern Element für Element an: {bands.map((band) => <li key={band.id}>{band.name}</li>)}. Das funktioniert auch mit Komponenten: <BandKarte key={band.id} band={band} />.
• Jeder Eintrag einer Liste braucht einen Key, der in der Liste eindeutig und für denselben Eintrag immer gleich ist, damit React die Einträge auseinanderhalten kann, wenn sich die Liste ändert. Nimm ihn aus den Daten (band.id), nicht aus der Position im Array. Er gehört an das Element, das map() zurückgibt, und die Komponente bekommt ihn nicht in ihren Props. Ohne Keys warnt die Konsole: Each child in a list should have a unique "key" prop.
• Was eine Liste zeigt, wird vor dem return entschieden: filter() wählt einige Einträge aus, sort() bringt sie in eine andere Reihenfolge. sort() ändert das Array selbst, also sortiere eine Kopie: [...bands].sort(…). Eine Komponente ändert die Daten nicht, die sie bekommt.
• if passt nicht in geschweifte Klammern, aber vor das return. Ein frühes Return erledigt zuerst einen Sonderfall: if (bands.length === 0) { return <p>Noch keine Bands.</p>; }. Eine Komponente, die nichts anzuzeigen hat, gibt null zurück.
• Der Bedingungsoperator Bedingung ? a : b ergibt a, wenn die Bedingung wahr ist, und sonst b. Er ist ein Ausdruck und kann deshalb in JSX stehen: für einen Text, ein Element oder ein Attribut (className={band.tag === "Freitag" ? "karte freitag" : "karte samstag"}).
• Bedingung && Element ergibt das Element oder nichts: Für false, true, null und undefined zeigt React nichts an. Zahlen zeigt es aber an, und 0 && … ergibt 0, also vergleiche: likes > 0 && ….

In der nächsten Lektion, Checkpoint: Rezeptbuch, setzt du Komponenten, Props, Listen und Bedingungen in einer eigenen App zusammen: einem Rezeptbuch.

Doch zuerst eine kleine Übung: die Ticketliste des Festivals. Die Tickets stehen in App.jsx, der Rest ist deine Aufgabe.