React-da Massiv Teqlerinde Unikal Açarlar

Əvvəlki nümunədə biz abzaslarımızı dövr içərisində belə formalaşdırmışdıq:

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

Bu işləyəcək, lakin konsola baxsaq - bir xəta görərik: Warning: Each child in an array or iterator should have a unique "key" prop. Bu halda React tələb edir ki, dövr içərisindəki hər bir teqə unikal nömrə verək ki, React-in bu teqlərlə sonradan işləməsi asanlaşsın.

Bu nömrə key atributu vasitəsilə əlavə olunur. Bu halda nömrə kimi biz elementin massivdəki nömrəsini götürə bilərik. Bizim halda bu nömrə index dəyişənində saxlanılır və düzəldilmiş sətir belə görünəcək:

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

Gəlin işə salaq - konsoldakı xəta yox olacaq:

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 daha: bu key atributunun React üçün xidməti mənası var, bu məqamı daha dərindən sonrakı dərslərdə anlayacaqsınız. Hələlik sadəcə bilin: belə bir xəta görsəniz - key atributunu hər bir teq üçün unikal dəyərlə əlavə edin və problem həll olunacaq.

key açarı yalnız bu dövrün içərisində unikal olmalıdır, başqa bir dövrdə key dəyərləri digər dövrdən olan dəyərlərlə üst-üstə düşə bilər.

Əvvəlki məsələnin həllinizi təsvir olunduğu kimi dəyişdirin.