React'ta Dizi Etiketlerinde Benzersiz Anahtarlar

Önceki örnekte, paragraflarımızı şu şekilde bir döngüde oluşturuyorduk:

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

Bu çalışacaktır, ancak konsola bakarsak bir hata görürüz: Warning: Each child in an array or iterator should have a unique "key" prop. Bu durumda React, döngüdeki her etikete, React'ın bu etiketlerle daha sonra çalışmasını kolaylaştırmak için benzersiz bir numara vermemizi gerektirir.

Bu numara, key özniteliği kullanılarak eklenir. Bu durumda numara olarak dizideki elemanın indeksini kullanabiliriz. Bizim durumumuzda bu numara index değişkeninde saklanır, bu nedenle düzeltilmiş satır şu şekilde görünecektir:

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

Hadi çalıştıralım - konsoldaki hata kaybolacak:

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

Bir kez daha: bu key özniteliği React için yardımcı bir anlama sahiptir, bu noktayı daha derinden sonraki derslerde anlayacaksınız. Şimdilik bilin: eğer böyle bir hata görürseniz - her etiket için benzersiz bir değere sahip key özniteliğini ekleyin ve sorun çözülecektir.

key anahtarının yalnızca bu döngü içinde benzersiz olması gerekir, başka bir döngüdeki key değerleri diğer döngüden gelen değerlerle çakışabilir.

Önceki görevinize ait çözümünüzü açıklanana göre değiştirin.