Унікальныя ключы ў масіве тэгаў у 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 могуць супадаць са значэннямі з другога цыклу.

Мадыфікуйце ваша рашэнне папярэдняй задачы ў адпаведнасці з апісаным.