Unikāli atslēgas React masīva elementos

Iepriekšējā piemērā mēs veidojām mūsu rindkopas cilpā, šādi:

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

Šis darbosies, tomēr, ja ieskatīsimies konsole - mēs redzēsim kļūdu: Warning: Each child in an array or iterator should have a unique "key" prop. Šajā gadījumā React pieprasa, lai katram elementam no cilpas mēs piešķirtu unikālu numuru, lai React būtu vienkāršāk ar šiem elementiem strādāt turpmāk.

Šis numurs tiek pievienots, izmantojot atribūtu key. Šajā gadījumā kā numuru mēs varam paņemt elementa numuru masīvā. Mūsu gadījumā šis numurs tiek glabāts mainīgajā index un tas nozīmē, ka labotā rinda izskatīsies šādi:

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

Palaidīsim - kļūda no konsoles pazudīs:

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

Vēlreiz: šim atribūtam key ir pakalpojoša nozīme React, dziļāk jūs sapratīsit šo punktu nākamajās nodarbībās. Pagaidām vienkārši ziniet: ja jūs redzat šādu kļūdu - pievienojiet atribūtu key ar unikālu katram elementam vērtību un problēma pazudīs.

Atslēgai key jābūt unikālai tikai šīs cilpas ietvaros, citā cilpā key vērtības var sakrist ar vērtībām no citas cilpas.

Modificējiet savu iepriekšējā uzdevuma risinājumu saskaņā ar aprakstīto.