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 талаб киладики, циклдаги ҳар бир тегга биз уникал рақам беришимиз керак, 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 учун хизмат кўрсатади, бу жиҳатни чуқурроқ сиз кейинги дарсларда тушунib оласиз. Ҳозирча оддийгина билиб қўйинг: агар сиз бундай хатони кўрсангиз - key атрибутини ҳар бир тег учун уникал қиймат билан қўшинг ва муаммо йўқолади.

key калити фақатгина ушбу цикл ичида уникал бўлиши керак, бошқа циклда key қийматлари бошқа циклдаги қийматлар билан мос келиши мумкин.

Олдинги масалаинг ёчимин тасвирлангандек ўзгартиринг.