Eindeutige Schlüssel via id in React

Im obigen Code haben wir in das Attribut key die Indexnummer des Elements im Array hinzugefügt. In der Praxis ist dies schlecht und sollte nur im äußersten Notfall verwendet werden.

Der Grund dafür ist, dass bei der Sortierung des Arrays die Elemente andere Schlüssel bekommen und React die Verbindung zwischen den Elementen des Arrays und den entsprechenden Tags nicht korrekt verfolgen kann.

Eine bessere Praxis ist es, jedem Produkt einen eindeutigen Identifikator hinzuzufügen, der als Schlüssel verwendet wird.

Fügen wir nun in unserem Array jedem Produkt eine Eigenschaft id mit der Nummer unseres Produkts hinzu:

const prods = [
	{id: 1, name: 'product1', cost: 100},
	{id: 2, name: 'product2', cost: 200},
	{id: 3, name: 'product3', cost: 300},
];

Jetzt verwenden wir diese id als Schlüssel:

function App() {
	const res = prods.map(function(item) {
		return <p key={item.id}>
			<span>{item.name}</span>:
			<span>{item.cost}</span>
		</p>;
	});
	
	return <div>
		{res}
	</div>;
}

Modifizieren Sie die vorherige Aufgabe, indem Sie dem Array id hinzufügen und diese als Werte für das Attribut key verwenden.