Chiavi univoche nell'array di tag in React

Nell'esempio precedente abbiamo formato i nostri paragrafi in un ciclo, in questo modo:

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

Questo funzionerà, tuttavia, se guardiamo nella console - vedremo un errore: Warning: Each child in an array or iterator should have a unique "key" prop. In questo caso React richiede che ad ogni tag del ciclo venga assegnato un numero univoco, in modo che React possa lavorare più facilmente con questi tag in seguito.

Questo numero viene aggiunto tramite l'attributo key. In questo caso come numero possiamo prendere il numero dell'elemento nell'array. Nel nostro caso questo numero è memorizzato nella variabile index e quindi la riga corretta sarà così:

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

Avviamo - l'errore nella console scomparirà:

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

Ancora una volta: questo attributo key ha un significato di servizio per React, capirete più a fondo questo punto nelle prossime lezioni. Per ora semplicemente sappiate: se vedete un errore del genere - aggiungete l'attributo key con un valore univoco per ogni tag e il problema scomparirà.

La chiave key deve essere univoca solo all'interno di questo ciclo, in un altro ciclo i valori key possono coincidere con i valori di un altro ciclo.

Modificate la vostra soluzione del problema precedente in conformità con quanto descritto.