Alle Rezepte

Eine Karte ist ein Anfang, jetzt kommt das ganze Buch. Zeige die Karten aller Rezepte an und in jeder Karte die Liste ihrer Zutaten:

Tomatensuppe
15 Minuten
4 Zutaten
• Tomaten
• Zwiebel
• Knoblauch
• Basilikum

Beides sind Listen, die mit map() entstehen, und beide brauchen Keys. Die Rezepte haben ihre id. Die Zutaten sind einfache Texte ohne Ids, aber keine Zutat steht in einem Rezept zweimal, also kann jeder Text sein eigener Key sein.

Eine Liste in einer Liste ist für React nichts Besonderes: Jede RezeptKarte geht mit map() die Zutaten ihres eigenen Rezepts durch, und App muss davon nichts wissen. Dafür sind Komponenten gut: Jede kümmert sich um ihren eigenen Teil der Seite.

Wenn alles stimmt, ist die Konsole leer: keine Warnung wegen der Keys.