4. Afficher une liste ou un tableau

Imaginons que nous souhaitons afficher une propriété d’un composant qui contient une liste de Pokémons, et que cette propriété se nomme pokemons. . Et bien, de la même manière que if n’est pas utilisable dans notre code JXS, la boucle for n’existe pas non plus. À la place, nous devons utiliser la méthode JavaScript native map dans notre template. Cette méthode s’applique à un tableau, et permet d’appliquer un certain traitement à chaque élément de ce tableau.

Dans notre cas, nous allons donc retourner un morceau de code JSX pour chaque pokémon de notre tableau :

<ul>
 {pokemons.map((pokemon) => (
  <li key={pokemon.name}>{pokemon.name}</li>
 ))}
</ul>

L’utilisation de la méthode map est intuitive, nous l’appliquons sur l’élément pokemons, et pour chaque pokémon du tableau nous renvoyons dans notre template le nom de ce pokémon. À la fin, nous obtenons une liste avec le nom de tous les pokémons présents dans le tableau pokemons.

Et cette propriété key à la ligne 3, qu’est ce que c’est ?

En fait, en exécutant le code sans key, vous obtiendrez un avertissement disant qu’une clé devrait être fournie pour les éléments d’une liste. Cette propriété key est un attribut spécial que vous devez inclure dans toutes vos listes JSX.

Les clés aident React à identifier quels éléments d’une liste ont changé, ont été ajoutés ou supprimés. Cela lui permet d’être beaucoup plus performant, et accessoirement de pouvoir fonctionner correctement. Vous devez donc assigner une clé à chaque élément de vos tableaux.

Le meilleur moyen de choisir une clé est d’utiliser une valeur unique parmi les éléments du tableau, comme l’identifiant ou le nom.

Seulement parfois, vous n’aurez pas de moyens d’assigner une valeur unique. Par exemple si deux éléments de votre tableau sont identiques. Lorsque vous n’avez pas d’identifiant unique, vous pouvez utilisez l’index du tableau comme clef à la place :

<ul>
 {pokemons.map((pokemon, index) => (
  <li key={index}>{pokemon.name}</li>
 ))}
</ul>

Mais si vous avez un identifiant unique sous la main, préférez toujours cette solution plutôt que l’index du tableau. C’est ce que recommande React.

Bon, nous avons presque terminé, mais avant de continuer, je souhaite vous montrer une petite astuce. Dans notre méthode map, vous remarquez que l’on passe tout l’objet pokemon, alors que nous n’affichons que sa propriété name. Ce n’est pas très efficace en terme de code.

En fait, le mieux serai de récupérer uniquement le nom du pokémon depuis la méthode map, car c’est la seule donnée dont nous ayons réellement besoin. Heureusement, il existe une fonctionnalité parfaite en ES6, qui s’appelle le destructuring si vous vous souvenez bien. Voici ce que cela donne :

<ul>
 {pokemons.map(({name}) => (
  <li key={name}>{name}</li>
 ))}
</ul>

Le code de la ligne 2 permet de dire « Ok, tu me donnes uniquement le nom d’un pokémon, car je n’ai pas besoin du reste« . Ensuite dans le template, on peut appeler simplement name plutôt que pokemon.name. C’est plus court, plus lisible, et pour le même résultat. Parfait !