Chei unice în matricea de tag-uri în React

În exemplul anterior ne formam paragrafele într-un ciclu, astfel:

const res = arr.map(function(item) {
	return <p>{item}</p>;
});

Aceasta va funcționa, totuși, dacă ne uităm în consolă - vom vedea o eroare: Warning: Each child in an array or iterator should have a unique "key" prop. În acest caz React cere ca fiecărui tag din ciclu să-i dăm un număr unic, pentru ca React să poată lucra mai ușor cu aceste tag-uri în continuare.

Acest număr se adaugă cu ajutorul atributului key. În acest caz ca număr putem lua numărul elementului în matrice. În cazul nostru acest număr este stocat în variabila index și deci linia corectată va arăta astfel:

const res = arr.map(function(item, index) {
	return <p key={index}>{item}</p>;
});

Să pornim - eroarea din consolă va dispărea:

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>;
}

Încă o dată: acest atribut key are o semnificație de serviciu pentru React, veți înțelege acest punct mai profund în lecțiile următoare. Deocamdată doar știți: dacă vedeți o astfel de eroare - adăugați atributul key cu o valoare unică pentru fiecare tag și problema va dispărea.

Cheia key trebuie să fie unică doar în interiorul acestui ciclu, în alt ciclu valorile key pot coincide cu valorile din alt ciclu.

Modificați soluția dvs. din sarcina anterioară în conformitate cu cele descrise.