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

Модификујте ваше решење претходног задатка у складу са описаним.