La fonction map() en Javascript

La fonction map() est une des fonctions clés des tableaux en Javascript.

Celle-ci itère sur chaque valeur du tableau et execute une fonction callback sur ces valeurs

Par exemple:

Cette fonction est particulièrement utile lorsque l'on a besoin de crée un nouveau tableau à partir d'un tableau existant sans modifier ce dernier.

C'est une méthode qu'on utilisera très souvent en ReactJS lorsque l'on devra générer une liste ou des liens à partir de données brutes.

Par exemple:

Ici mes données sont contenues dans l'objet data qui contient un tableau dans data.allContentfulBlogPost.edges j'utilise la fonction map pour générer un nouveau tableau qui contiendra tout les éléments de mon tableau de données. Le premier argument extrait l'objet {node} de chaque élément de mon tableau (qui contient forcément un objet node). Le deuxième argument permet simplement de récupérer l'index de l'itération et de l'assigner à la propriété key qui est demandé lorsque l'on génère une liste en ReactJS. Par la suite je peux assigner dynamiquement les valeurs contenues dans chaque élément en tant que contenu dans mes éléments html (qui sont ici des components ReactJS, <ItemWrapper> est simplement une <div> )