Aus dem Kurs: React Grundkurs
So erhalten Sie Zugriff auf diesen Kurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 24.700 Kurse von Branchenfachleuten.
Das key-Attribut verstehen – Tutorial zu React.js
Aus dem Kurs: React Grundkurs
Das key-Attribut verstehen
In dieser Lektion beschäftigen wir uns mit Schleifen innerhalb von JSX und wir schauen uns an, was das key-Attribut ist. Hier sehen Sie eine schöne Liste von Tasks. Normalerweise würden sie aber dynamisch ein Array ablaufen, da sie die Werte, die vom Server kommen, gar nicht kennen. Lassen Sie uns daher die Tasks als Array definieren. Alles, was Sie in JSX in den geschweiften Klammern angeben, wird ganz normal als JavaScript evaluiert und das Ergebnis an die entsprechende Stelle geschrieben. Deshalb ist es gängige Praxis, einfach Array map zu verwenden. Dann können wir für jeden Task einfach ein neues li generieren, dieses enthält dann den Text des Tasks. Wie Sie sehen, hat es funktioniert, denn wenn wir hier "React lernen 2" angeben, so sehen wir, dass unsere Liste entsprechend aktualisiert wird. Wenn Sie jedoch die Konsole öffnen, so sehen Sie eine Fehlermeldung: "Each child in a list should have a unique "key" prop". Warum ist das so und was will React hier? React will an jedem…