Уникални клучеви во низа од тагови во 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 може да се совпаѓаат со вредностите од друг циклус.

Модифицирајте го вашето решение од претходната задача во согласност со опишаното.