React'ta id ile Benzersiz Anahtarlar

Yukarıdaki kodda, key özniteliğine dizideki elemanın sıra numarasını ekliyorduk. Aslında bu kötü bir uygulamadır ve yalnızca son çare olarak kullanılmalıdır.

Sebebi şudur: dizi sıralandığında, elemanların anahtarları değişecek ve React, dizi elemanları ile ilgili etiketler arasındaki bağlantıyı doğru şekilde izleyemeyecektir.

Daha iyi bir uygulama, her bir ürüne benzersiz bir kimlik eklemek ve bunu anahtar olarak kullanmaktır.

Şimdi dizimizdeki her bir ürüne, ürün numaramızla birlikte bir id özelliği ekleyelim:

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

Şimdi anahtar olarak bu id'yi kullanıyoruz:

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

Önceki görevi, diziye id ekleyerek ve bunları key özniteliğinin değeri olarak kullanarak değiştirin.