Claves únicas en un array de etiquetas en React

En el ejemplo anterior, formamos nuestros párrafos en un bucle, así:

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

Esto funcionará, sin embargo, si miramos en la consola - veremos un error: Warning: Each child in an array or iterator should have a unique "key" prop. En este caso, React requiere que demos un número único a cada etiqueta del bucle para que a React le sea más fácil trabajar con estas etiquetas en el futuro.

Este número se añade mediante el atributo key. En este caso, como número podemos tomar el número del elemento en el array. En nuestro caso, este número se almacena en la variable index y por lo tanto la línea corregida se verá así:

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

Ejecutemos - el error en la consola desaparecerá:

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

De nuevo: este atributo key tiene un significado de servicio para React, entenderán este punto más profundamente en las siguientes lecciones. Por ahora simplemente sepan: si ven tal error - añadan el atributo key con un valor único para cada etiqueta y el problema desaparecerá.

La clave key debe ser única solo dentro de este bucle, en otro bucle los valores de key pueden coincidir con los valores de otro bucle.

Modifique su solución de la tarea anterior de acuerdo con lo descrito.