Çelësat Unikë në Një grup Etiketash në React

Në shembullin e mëparshëm ne formuam paragrafët tanë në një cikël, kështu:

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

Kjo do të funksionojë, megjithatë, nëse shikojmë në konsol - do të shohim një gabim: Warning: Each child in an array or iterator should have a unique "key" prop. Në këtë rast React kërkon që secilës etiketë nga cikli t'i japim një numër unik, në mënyrë që React të ketë më të lehtë të punojë me këto etiketa në të ardhmen.

Ky numër shtohet duke përdorur atributin key. Në këtë rast si numër ne mund të marrim numrin e elementit në array. Në rastin tonë ky numër ruhet në variablin index dhe kështu rreshti i korrigjuar do të duket kështu:

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

Le të ekzekutojmë - gabimi nga konsola do të zhduket:

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

Edhe një herë: ky atribut key ka kuptim shërbimi për React, më thellë ju do ta kuptoni këtë pikë në mësimet në vijim. Tani për tani thjesht diini: nëse shihni një gabim të tillë - shtoni atributin key me një vlerë unike për secilën etiketa dhe problemi do të zhduket.

Çelësi key duhet të jetë unik vetëm brenda këtij cikli, në një cikël tjetër vlerat key mund të përputhen me vlerat nga një cikël tjetër.

Modifikoni zgjidhjen tuaj të detyrës së mëparshme në përputhje me atë që u përshkrua.