Uniikit avaimet id:n kautta Reactissa

Yllä olevassa koodissa lisäsimme key-attribuuttiin elementin järjestysnumeron taulukossa. Itse asiassa tämä käytäntö on huonoa, ja sitä tulisi käyttää vain hätätapauksissa.

Asia on niin, että kun taulukkoa lajitellaan, elementeistä tulee toiset avaimet ja React ei pysty seuraamaan oikein taulukon elementtien ja vastaavien tagien välistä yhteyttä.

Parempi käytäntö olisi lisätä jokaiselle tuotteelle yksilöllinen tunniste, jota käytetään avaimena.

Lisätään taulukossamme jokaiselle tuotteelle id-ominaisuus tuotteen numerolla:

const prods = [
	{id: 1, name: 'product1', cost: 100},
	{id: 2, name: 'product2', cost: 200},
	{id: 3, name: 'product3', cost: 300},
];

Käytämme nyt tätä id:tä avaimena:

function App() {
	const res = prods.map(function(item) {
		return <p key={item.id}>
			<span>{item.name}</span>:
			<span>{item.cost}</span>
		</p>;
	});
	
	return <div>
		{res}
	</div>;
}

Muokkaa edellistä tehtävää lisäämällä taulukkoon id ja käyttämällä niitä key-attribuutin arvoina.