Eindeutige Keys in Arrays von Tags in React

Im vorherigen Beispiel haben wir unsere Absätze in einer Schleife erstellt, so:

const res = arr.map(function(item) {
	return <p>{item}</p>;
});

Das wird funktionieren, jedoch, wenn wir in die Konsole schauen - sehen wir einen Fehler: Warning: Each child in an array or iterator should have a unique "key" prop. In diesem Fall verlangt React, dass wir jedem Tag aus der Schleife eine eindeutige Nummer geben, damit es für React einfacher ist, mit diesen Tags weiterzuarbeiten.

Diese Nummer wird mit Hilfe des Attributs key hinzugefügt. In diesem Fall können wir als Nummer den Index des Elements im Array nehmen. In unserem Fall wird dieser Index in der Variable index gespeichert und somit wird die korrigierte Zeile so aussehen:

const res = arr.map(function(item, index) {
	return <p key={index}>{item}</p>;
});

Lassen Sie uns starten - der Fehler in der Konsole wird verschwinden:

function App() {
	const arr = [1, 2, 3, 4, 5];
	
	const res = arr.map(function(item, index) {
		return <p key={index}>{item}</p>;
	});
	
	return <div>
		{res}
	</div>;
}

Noch einmal: Dieses Attribut key hat eine dienende Bedeutung für React, diesen Punkt werden Sie tiefer in den folgenden Lektionen verstehen. Wissen Sie einfach vorerst: Wenn Sie einen solchen Fehler sehen - fügen Sie das Attribut key mit einem für jedes Tag eindeutigen Wert hinzu und das Problem wird verschwinden.

Der Schlüssel key muss nur eindeutig sein innerhalb dieser Schleife, in einer anderen Schleife können die Werte von key mit den Werten aus einer anderen Schleife übereinstimmen.

Modifizieren Sie Ihre Lösung der vorherigen Aufgabe gemäß der Beschreibung.