Unikalne klucze przez id w React

W powyższym kodzie do atrybutu key dodawaliśmy numer porządkowy elementu w tablicy. W rzeczywistości taka praktyka jest zła i należy jej używać tylko w ostateczności.

Chodzi o to, że przy sortowaniu tablicy elementy uzyskają inne klucze i React nie będzie w stanie prawidłowo śledzić związku między elementami tablicy a odpowiadającymi im tagami.

Lepszą praktyką będzie dodanie każdemu produktowi unikalnego identyfikatora, który i będzie używany jako klucz.

Dodajmy w naszej tablicy każdemu produktowi właściwość id z numerem naszego produktu:

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

Teraz jako klucza użyjemy tego id:

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>;
}

Zmodyfikuj poprzednie zadanie, dodając do tablicy id i wykorzystując je jako wartości atrybutu key.