Aplicaciones del método forEach() en React

La introducción de la versión Modern ES6 de JavaScript nos ha traído muchas características útiles. El método .forEach() es solo un ejemplo.

Como habrás adivinado por el nombre, el método .forEach() ejecuta una función de devolución de llamada en cada elemento del array. Esto se hace para transformar cada elemento del array de una forma u otra.

En React, a menudo renderizamos componentes basados ​​en una lista. Por ejemplo, no es raro tener una lista de nombres de usuario y necesitar mostrar cada uno de ellos como párrafos.

En el proceso, también puede transformarlos de otra manera, como capitalizándolos.

Arreglo de elementos a elementos en JSX

JSX es una sintaxis familiar similar a HTML que reduce el esfuerzo de estructurar nuestros componentes. En última instancia, el código escrito en JSX se compila en un conjunto complejo de llamadas al método React.createElement().

Para usar .forEach() u otros métodos de JavaScript dentro de JSX, debe colocar las expresiones entre llaves. Esto es necesario para que React sepa que debe tratar todo lo que esté entre llaves como JavaScript normal.

.forEach() en React

En JavaScript puro, .forEach() es muy útil para cambiar cada elemento del array.

Es menos útil si está intentando renderizar componentes basados ​​en una lista en React. Hay múltiples razones por las que los desarrolladores de React no usan .forEach() para renderizar componentes.

Si desea utilizar llaves para representar varios componentes en función de una lista, la expresión entre las llaves debe devolver una lista de componentes.

Si intenta usar .forEach() para este propósito, descubrirá que no aparece nada. Esto sucede porque .forEach() devuelve indefinido.

Por naturaleza, .forEach() no está diseñado para devolver un valor. Su propósito principal es transformar cada elemento del array, pero nada más. El método no devuelve una nuevo array; devuelve undefined.

En cambio, los desarrolladores de React usan un método alternativo, .map().

.map() como alternativa

ES6 también introdujo el método .map(), que es más adecuado para representar componentes basados ​​en una lista.

Al igual que .forEach(), toma un argumento: una función que especifica cómo transformar cada elemento del array. Sin embargo, a diferencia de .forEach(), el método map dejal array original y devuelve una nueva que contiene los elementos transformados.

Esto es justo lo que necesita para renderizar múltiples componentes basados ​​en un array.

Veamos un ejemplo]:

class App extends Component {
  render() {
    return <div>{[1,2,3].map(number => <h1>{number}</h1>)}</div>;
  }
}

En este ejemplo, obtuvimos un array de números que usamos .map() para crear una nuevo array. La nuevo array contiene tres elementos <h1> con los tres valores numéricos del array original.

Cuando se usa el método .map(), también es una buena idea dar a cada elemento nuevo una propiedad key distinta. React usa el valor key para identificar un elemento único.

Así es como se vería el bloque de código anterior después de seguir este patrón:

class App extends Component {
  render() {
    return <div>{[1,2,3].map(number => <h1 key={number}>{number}</h1>)}</div>;
  }
}

Dado que los números en nuestra matriz son únicos, podemos usar su valor como una key.