React-тағы массив тегтеріндегі бірегей кілттер

Алдыңғы мысалда біз параграфтарды цикл арқылы құрдық, мына түрде:

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

Бұл жұмыс істейді, бірақ, егер консольге қарасақ - біз қатені көреміз: Warning: Each child in an array or iterator should have a unique "key" prop. Бұл жағдайда React талап етеді, циклдегі әрбір тегге бірегей нөмір беруimіз керек, бұл React-қа осы тегтермен әрі қарай жұмыс істеуді жеңілдетеді.

Бұл нөмір key атрибуты арқылы қосылады. Бұл жағдайда нөмір ретінде біз массивтегі элемент нөмірін ала аламыз. Біздің жағдайда бұл нөмір index айнымалысында сақталады және түзетілген жол мынадай болады:

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

Жүктейік - консольдегі қате жоғалады:

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

Тағы бір рет: бұл key атрибуты React үшін қызметтік мағынаға ие, сіз бұл сәтті келесі сабақтарда тереңірек түсінесіз. Қазір тек біліңіз: егер сіз осындай қатені көрсеңіз - key атрибутын қосыңыз әрбір тег үшін бірегей мәнмен және мәселе жоғалады.

key кілті бірегей болуы керек тек осы цикл ішінде, басқа циклде key мәндері басқа циклдегі мәндермен сәйкес келуі мүмкін.

Алдыңғы тапсырманың шешімін сипатталғанға сәйкес өзгертіңіз.