Arrays en React
Renderiza manualmente una lista de elementos
Para renderizar una lista de forma manual, debes escribir cada elemento li donde corresponda.
En este ejercicio crearemos un componente que renderiza una lista creada con elementos ul y li
Si bien esta forma de renderizar elementos es simple puede ser poco eficiente si son muchos los elementos o si estos elementos vienen como una prop, son dinámicos o de formas complejas (arreglo de objetos)
Utiliza Array.map
Utilizar Array.map es una forma simple de iterar y renderizar múltiples elementos, en este caso, en una lista.
Utiliza la prop key
La prop key permite a React crear una heurística confiable para conocer cuando un elemento renderizado de forma iterativa cambia o no y así poder ejecutar un renderizado mas eficiente.
Revisa este artículo para saber más sobre la prop key
Transcripción
Resolvamos ahora estos ejercicios, para eso abrimos nuestro archivo index.html donde encontraremos las direcciones para poder resolver nuestros ejercicios. Lo primero es crear un componente que renderice una lista de elementos, lo definiremos de forma manual escribiendo elementos li. Item 1, lo copiamos y lo repetimos tres veces.
Perfecto, nuestro componente manual de una lista está hecho, ahora simplemente tenemos que renderizarlo en la pantalla, para eso lo ponemos aquí, manual list. Y ahora iniciamos nuestra terminal, npm run dev, lección 8. Visitamos localhost 3000 y tenemos nuestros componentes puestos en pantalla, revisamos qué es lo que hay y podemos ver que está exactamente lo que escribimos en nuestro código.
Ahora bien, ¿cómo podemos hacer lo mismo pero utilizando ArrayMap para crear una lista algo más automatizada? Tenemos aquí una lista, un arreglo de strings, utilizaremos interpolación dentro del elemento ul, donde usaremos strings.map, el método ArrayMap, que recibe una función que itera sobre cada uno de los elementos del arreglo y retorna un elemento jsx, en este caso li. Lo copiamos acá para poder renderizarlo y vemos en pantalla que nuestros tres strings de este arreglo están disponibles. Si agregamos un cuarto string, este se muestra en pantalla automáticamente.
Vamos a mirar qué hay en el código y podemos ver exactamente lo mismo, elementos li. Aquí vemos el warning sobre la prop key. Simplemente agregaremos una prop key utilizando un valor único, en este caso nuestro arreglo tiene valores únicos, string1, string2, string3, así que usaremos aquello y el arreglo no cambia, así que es un valor estable.
Aquí podemos ver qué es lo que hizo Babel para mostrarnos la key. Ahora, que estamos usando ArrayMap, también podemos renderizar arreglos más complejos, como un arreglo de objetos. Para eso modificaremos nuestro arreglo original y crearemos este pequeño objeto que tiene un id y un value. Ahora, ¿cómo renderizamos esto? Item ahora es un objeto, id y value. Por lo tanto, ahora nuestra key tendrá que ser accediendo al objeto, item.id y lo que renderizamos será item.value.
Podemos ver que en pantalla se muestra correctamente la información, pero ahora cambiamos el value a un número y utilizaremos otro método, ArrayFilter, donde removeremos todos aquellos elementos que son números, mapeamos sobre eso y podemos mostrar diferentes filtros en pantalla. Ahora de nuestro crédito extra, que básicamente se trata de revisar el demo que aparece en el artículo de escuela front-end. Aquí tenemos el demo, es en Codes Unbox.
Lo que nos interesa es saber que tenemos este arreglo de objetos. Aquí hay algunas funciones que vamos a revisar más adelante. Básicamente te permiten agregar o remover ítems. Utilizamos algunas otras cosas de React como UseState, que en este momento no nos enfocaremos, pero nos enfocaremos en lo que está aquí, renderizándose. Veamos qué es lo que pasa cuando no usamos la prop key. Podemos ver que estamos cambiando algunos estados, pero fíjate en este momento, al agregar un nuevo elemento y eliminar uno, los valores de estado cambian.
Lo que hemos seleccionado en el Xbox es diferente. Y eso es porque React no sabe bien qué hacer con esta selección, con este estado interno del browser. Pero si agregamos la prop key como corresponde, con un valor estable, en este caso el ID del ítem, podemos ver que el bug que estábamos revisando no ocurre. Puedo ir cambiando los valores y eliminando y agregando elementos sin el problema de perder el estado asociado. Para entender más cómo funciona la prop key y cómo React lo hace, te invito a revisar este artículo que nos muestra qué es lo que pasa entre el virtual DOM y el DOM cuando hacemos cambios en una lista y por qué la prop key es necesaria para que React pueda saber sin pasar por heurísticas qué es lo que ocurre y qué hacer con los estados.