Applications de la méthode forEach() dans React

L’introduction de la version Modern ES6 de JavaScript nous a apporté de nombreuses fonctionnalités utiles. La méthode .forEach() n’est qu’un exemple.

Comme vous l’avez peut-être deviné d’après son nom, la méthode .forEach() exécute une fonction de rappel sur chaque élément du tableau. Ceci est fait pour transformer chaque élément du tableau d’une manière ou d’une autre.

Dans React, nous rendons souvent les composants en fonction d’une liste. Par exemple, il n’est pas rare d’avoir une liste de noms d’utilisateur et de devoir afficher chacun d’eux sous forme de paragraphes.

Dans le processus, vous pouvez également les transformer d’une autre manière, comme les capitaliser.

Éléments de tableau en éléments dans JSX

JSX est une syntaxe familière de type HTML qui réduit l’effort de structuration de nos composants. En fin de compte, le code écrit en JSX se compile en un ensemble complexe d’appels de méthode React.createElement().

Pour utiliser .forEach() ou d’autres méthodes JavaScript dans JSX, vous devez placer les expressions entre accolades. Ceci est nécessaire pour faire savoir à React de traiter tout ce qui se trouve entre les accolades comme du JavaScript normal.

.forEach() dans React

En JavaScript pur, .forEach() est très utile pour modifier chaque élément du tableau.

C’est moins utile si vous essayez de rendre des composants basés sur une liste dans React. Il existe plusieurs raisons pour lesquelles les développeurs de React n’utilisent pas .forEach() pour rendre les composants.

Si vous souhaitez utiliser des accolades pour rendre plusieurs composants basés sur une liste, l’expression entre les accolades doit renvoyer une liste de composants.

Si vous essayez d’utiliser .forEach() à cette fin, vous découvrirez que rien ne s’affiche. Cela se produit parce que .forEach() renvoie undefined.

Par nature, .forEach() n’est pas conçu pour renvoyer une valeur. Son objectif principal est de transformer chaque élément du tableau, mais rien d’autre. La méthode ne renvoie pas un nouveau tableau ; il renvoie undefined.

Au lieu de cela, les développeurs de React utilisent une méthode alternative, .map().

.map() comme alternative

ES6 a également introduit la méthode .map(), qui est mieux adaptée pour rendre les composants basés sur une liste.

Comme .forEach(), il prend un argument - une fonction qui spécifie comment transformer chaque élément du tableau. Cependant, contrairement à .forEach(), la méthode map quitte le tableau d’origine et en renvoie un nouveau contenant les éléments transformés.

C’est exactement ce dont vous avez besoin pour rendre plusieurs composants basés sur un tableau.

Regardons un exemple :

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

Dans cet exemple, nous avons obtenu un tableau de nombres que nous .map() pour créer un nouveau tableau. Le nouveau tableau contient trois éléments <h1> avec les trois valeurs numériques du tableau d’origine.

Lorsque vous utilisez la méthode .map(), donner à chaque nouvel élément un accessoire key distinct est également une bonne idée. React utilise la valeur key pour identifier un élément unique.

Voici à quoi ressemblerait le bloc de code ci-dessus après avoir suivi ce modèle :

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

Comme les nombres de notre tableau sont uniques, nous pouvons utiliser leur valeur comme key.