Уникални ключове в масив от тагове в 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, по-задълбочено ще разберете тази точка в следващите уроци. Засега просто знайте: ако видите такава грешка - добавете атрибута key с уникална за всеки таг стойност и проблемът ще изчезне.

Ключът key трябва да бъде уникален само в рамките на този цикъл, в друг цикъл стойностите на key могат да съвпадат със стойности от друг цикъл.

Модифицирайте вашето решение на предишната задача в съответствие с описаното.