Un listado de elementos es un objeto muy común en cualquier lenguaje de programación. Con él, podemos crear páginas de tipo listado, reconocidas en aplicaciones de redes sociales como Twitter. Aunque este objeto existe en muchos lenguajes de programación, en React tiene una particularidad. En este post, te enseñaremos qué es y cómo funciona el key prop en React, una propiedad fundamental para cualquier lista de elementos en esta librería.
Un poco de contexto
Antes de enseñarte qué es y cómo funciona el key prop en React, debemos presentarte el contexto habitual que nos introduce a esta propiedad. En nuestro post sobre crear una página listado en React, te hemos enseñado cómo insertar distintos elementos li para crear un listado de tweets. Luego, en nuestro post sobre transformar un array de objetos en enlaces, te hemos mostrado cómo usar el método JavaScript map para transformar objetos con distintas propiedades a elementos de un listado.
Si has seguido los tutoriales anteriores y tienes abierta la herramienta React Developper Tools en tu navegador, verás que, después de crear los distintos elementos de lista, nos ha aparecido un error. Este error se ve como un punto rojo al lado del nombre de nuestro componente, que, en nuestro caso, se llama TweetsPage. ¿Qué lee este error? Pues el siguiente mensaje.
Warning: Each child in a list should have a unique «key» prop.
El mensaje anterior es la forma que tiene React de decirnos que, cuando rendericemos una lista de elementos a partir de un array, debemos otorgarle una propiedad key, también conocida como key prop en React.
¿Qué es un key prop en React?
El key prop en React es un atributo o prop especial que nos permite identificar de manera única cada elemento de nuestro listado. Entonces, para solucionar el error anterior, deberemos pasar la palabra clave key por el elemento li.
¿Qué podemos utilizar para identificar de manera única un elemento? Esto dependerá de tu proyecto. En nuestro caso, el array de objetos del que proviene nuestro listado de elementos le ha asignado una propiedad ID a cada objeto. A continuación, puedes ver este array de objetos:
const tweets = [
{
content: «Nos hace mucha ilusión anunciar el ESTRENO de nuestra nueva película»,
link:’ https://www.tweet1.com’,
userId: 1,
updatedAt: ‘2021-03-15T18:23:57,5792’,
id: 1,
},
{
content: «Soy muy fan tuya, pero ahora no me acuerdo de cómo te llamas»,
link: ‘https://www.tweet2.com’,
userId: 2,
updatedAt: ‘2021-03-15T18:24:56,7732’,
id: 2,
},
];
Entonces, podemos utilizar esta propiedad única para identificar al elemento. Para ello, basta con insertar la línea de código key={tweets.id} dentro de la función map que hemos creado.
A continuación, puedes ver las líneas de código finales con este nuevo atributo:
const TweetsPage = ( ) => {
<div> className = ‘tweetsPage’>
<ul>
{tweets.map (tweet =>
<li key= {tweet.id}>{tweet.content}</li>)}
</ul>
</div>
);
export default TweetsPage;
Utilizar el key prop en React es bastante importante. Además de que nos permite ahorrarnos el error mostrado por React, utilizar este atributo facilita el proceso de comparar el VirtualDOM de React con el DOM real. Es decir, en esta librería JavaScript, el key prop permite definir qué elemento del DOM corresponde a qué elemento de React.
¿Quieres seguir aprendiendo?
Ahora que sabes qué es y cómo funciona la key prop en React, estás cada vez más cerca de dominar esta compleja librería de JavaScript. Para seguir aprendiendo sobre esta y otras muchas herramientas de programación para la web, te recomendamos echarle un vistazo a nuestro Desarrollo Web Full Stack Bootcamp.
En esta formación intensiva, aprenderás a dominar JavaScript, React, CSS, HTML y muchas otras formas de desarrollo web, lo que te permitirá convertirte en un experto de este mundo. ¿Quieres seguir aprendiendo con nosotros? ¡Te esperamos!
