React — map, filter y reduce
Temario
- Introducción (map, filter, reduce en JavaScript)
- map
- filter
- reduce
i. Introducción
En esta story, vamos a ver como combinar los array functions: map, filter y reduce[ref] con React. Antes de continuar, vamos a repasar un poco…
— map( array.map[ref])
El método map, lo utilizamos cuando queremos transformar un arreglo, pero persistiendo el arreglo original, dicho en otras palabras ejecuta una función dada en cada elemento del arreglo actual y crea un nuevo arreglo con el resultado de la función dada.
Ejemplo en código:
Ejemplo visual:
— filter( array.filter[ref])
El método filter crea un nuevo arreglo con todos los elementos que cumplan la condición dada, dicho en otras palabras, cuando iteramos un arreglo y queremos seleccionar cada el elemento que cumpla con la condición dada.
Ejemplo en código:
Ejemplo visual:
— reduce( array.reduce[ref])
El método reduce también ejecuta una devolución de llamada para que elemento del arreglo, pero como su nombre lo dice reduce a un solo valor el arreglo (puede ser un objeto, string, número, etc.)
Ejemplo en código:
Ejemplo visual:
ii. map
Con React, surge la necesidad de poder renderizar múltiples elementos o componentes, por fortuna es tan sencillo, en el ejemplo siguiente vamos a transformar un array en lista de elementos.
Ejemplo: Vamos a recorrer un arreglo de personas, donde devolveremos un elemento <li> por cada ítem recorrido, donde será asignado a la variable listItems y finalmente lo agregaremos por medio de JSX a nuestro elemento <ul>.
Veamos el ejemplo en acción:
Bastante sencillo, ¿no?
Perfecto, ahora hagamos un ejemplo más complejo y ahora sí usando componentes…
Sigamos con el mismo ejemplo de arriba, donde, vamos a generar un componente PersonList, donde va a recibir la lista de personas y debe imprimirla en pantalla:
— Podemos agregar directamente el map, dentro del elemento:
— O podemos agregarlo primero en una constante, y al final ponerla en el elemento:
Veamos el ejemplo completo:
Ahora si revisamos la consola, vemos que nos arroja la siguiente advertencia:
React necesita identificar qué ítems han cambiado, agregados, eliminados; entonces, necesitamos agregar el atributo key, para darle a cada elemento/componente un id fijo y único por lista.
La mejor forma de agregarle un identificador es mediante una propiedad de nuestro propia lista, entonces, hagamos algunos cambios a nuestro código:
Veamos el ejemplo completo:
Si revisamos la consola, podemos observar que ya no sale la advertencia.
En caso de que tengamos una lista y no contemos con un identificador, podemos usar el index de la propia lista; aunque React recomienda NO usar esta forma, ya que si el orden de los ítems cambia, puede impactar en el rendimiento y en el estado del componente[ref], en caso de que no asignemos un identificador de manera explícita a la lista de ítems, React por defecto usará índices como keys.
Si bien, no es nada del otro mundo asignar identificadores, si es importante revisar donde lo asignamos, ya que solo es útil en el contexto del array que las envuelve, revisemos el siguiente ejemplo:
- Lo que vamos a hacer es extraer a un componente ListItem:
La pregunta es: ¿Donde va el identificador?, en <ListItem> o en <li>…
Si has dicho que debe ir en el <li>, debo decirte que es incorrecto!, ya que como explicamos anteriormente el identificador debe ir en el contexto del array que las envuelve, en términos más simples, la llave va donde se itera nuestro arreglo (map), entonces en este caso quien debe llevar el identificador es el componente <ListItem>, entonces nuestro ejemplo quedaría así:
El identificador (key) es utilizado por React, por lo que NO es pasado a nuestro componente interno, esto quiere decir que si necesitamos utilizar propiedad, es necesario agregarla explícitamente con otro nombre, veamos un ejemplo:
Si observamos nuestro ejemplo, el atributo key no lo pasa al componente.
ii. filter
Aprovecharemos la lista que tenemos arriba, y complementaremos el ejemplo, la idea es tener lo siguiente:
Cada vez que escribamos algo en el input, nos filtre la lista que tenemos abajo (distingue mayúsculas de minúsculas).
Vamos paso a paso:
- Crearemos un componente Input, donde nos va a permitir ingresar el texto:
- Crearemos un componente ListItem, que nos va a devolver el item que recorre la lista:
- Crearemos el componente PeopleList que envuelva los componentes creados:
Hasta aquí nuestro componente, debe verse algo así:
- El siguiente paso es agregarle la funcionalidad al Input, por lo que debemos de agregarle el atributo hChange, donde le agregaremos el método a enlazar, cada vez que escriba algo…
Dentro del constructor, crearemos un estado (filter), en el JSX del componente, agregamos el método que queremos escuchar, crearemos el método, y guardaremos el valor en el estado (filter).
Si lo hemos hecho bien, debe verse algo así:
- Ahora por último en el render, vamos a aplicar el filtro:
Lo que hacemos es filtrar primero el objeto, y los valores que quedan, son los que vamos a agregar al elemento <ul>.
Si lo hemos hecho bien, debe verse algo así:
Veamos el ejemplo completo:
Nota: Quizás la solución pueda no ser la mejor en cuanto a rendimiento, la idea es mostrar un ejemplo con filter.
iii. reduce
Ejemplo: Imaginemos tenemos el siguiente arreglo:
Si observamos bien, es un arreglo de arreglos, donde cada arreglo es de objetos, la idea es poder unificar todos, de la siguiente manera:
Además nos deje buscar un título de una película, de hecho podemos aprovechar el ejemplo anterior y hacerle unos cambios:
Vamos el ejemplo completo:
En la siguiente entrega vamos a ver React — codesandbox.io
La entrega pasada vimos React — Manejadores de eventos (desde el constructor, campo público de clase, Binding en render(), función de flecha), Pasando argumentos, Eventos sintéticos
Bibliografía y links que te puede interesar…
