Reaktda taglar massiwiniň unikal açarlary

Öňki mysalda biz paragraphlarymyzy aýlawda düzýärdik, şeýle:

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

Bu işler, ýöne konsola gözegçilik etsek - ýalňyşlygy göreris: Warning: Each child in an array or iterator should have a unique "key" prop. Bu ýagdaýda React, aýlawdan çykýan her bir taga unikal nomer bermegimizi talap edýär, şeýlelik bilen Reaktyň indiki işlerde bu taglar bilen işlemegi aňsatlaşdyrýar.

Bu nomer key atly atribut arkaly goşulýar. Bu ýagdaýda nomer hökmünde biz massiwdäki element nomerini alyp bileris. Bizim ýagdaýymyzda bu nomer index üýtgeýjisinde saklanýar we düzedilen setir şeýle görüner:

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

Geliň işledeliň - konsoldaky ýalňyşlyk ýokolar:

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

Ýene bir gezek: bu key atributy Reakt üçin hyzmatdy maksada eýe, bu nokat barada has çuňňury indiki sapaklarda düşünersiňiz. Häzirlik bilň: eger şeýle ýalňyşlygy görseňiz - her bir tag üçin unikal baha bilen key atributyny goşuň we mesela ýokolar.

key açary diňe şu aýlawyň içinde unikal bolmaly, beýleki aýlawda key bahalary beýleki aýlawdaky bahalar bilen degislilikde bolup biler.

Öňki meseläniň çözgüdiniňizi beýan edilene laýyklykda üýtgediň.