Retour • 11/08/2024

Comment afficher une liste en React ?

Écris par Melvyn Malherbe le 11/08/2024

Quand j'ai commencé React, mon plus gros problème était d'afficher une liste.

Ça paraît être un sujet relativement simple, pourtant non ?

Détrompe-toi.

Dans ce post, nous allons voir :

• Comment afficher une liste en React ?
• Pourquoi il faut ajouter une key unique ?
• La syntaxe "compliquée" et quand l'utiliser
• Comment et pourquoi les listes sont affichées en React

Attention, je pars du principe que tu as les prérequis en JavaScript pour suivre ce cours. Tu peux le vérifier ici. !

Comment afficher une liste en React ?

Déjà, c'est quoi une liste ? En JavaScript, ça représente souvent un tableau :

const fruits = ['mango', 'pineapple', 'banana'];

Ce tableau peut être un tableau de string comme ici, ou d'objets.

Pour afficher cette liste dans un rendu JSX, on utilise la méthode de tableau .map qui va nous permettre de retourner un nouveau tableau... d'éléments JSX !

Il y a 3 parties intéressantes à ce code.

1. Ouverture du monde JavaScript : en utilisant les {} on vient "rentrer" dans le monde du JavaScript.
2. Utilisation de fruits.map qui va retourner un nouveau tableau sans modifier le tableau original.
3. Retour de JSX avec <li />.

Pour simplifier ce code, il est possible de l'écrire comme ceci :

const Fruits = () => {
  const liItems = fruits.map((fruit) => <li key={fruit}>{fruit}</li>);
  return <ul>{liItems}</ul>;
};

Une subtilité intéressante est le fait que notre méthode qui retourne les <li /> ne possède pas de return !

C'est ce qu'on appelle un "shorthand" de JavaScript, quand on utilise les parenthèses, on return directement le résultat. Pour encore simplifier le code, il est possible de l'écrire comme ceci :

const Fruits = () => {
  const liItems = fruits.map((fruit) => {
    return <li key={fruit}>{fruit}</li>;
  });

  return <ul>{liItems}</ul>;
};

Maintenant tu vois clairement toutes les étapes qui nous permettent d'afficher une liste en React !

Pourquoi utiliser les key ?

Les key permettent d'identifier de manière unique un élément du tableau. Elles permettent à React de "préserver" l'état de celui-ci.

L'exemple le plus simple pour le comprendre c'est de t'afficher une liste de input :

À toi de jouer ! Rajoute une key sur le champ input et regarde la différence.

La syntaxe "compliquée" et quand l'utiliser

Je t'ai présenté avant la syntaxe avec le return ! Il est aussi possible de l'utiliser directement à l'intérieur du JSX :

const Fruits = () => {
  return (
    <ul>
      {fruits.map((fruit) => {
        return <li key={fruit}>{fruit}</li>; 
      })}
    </ul>
  );
};

Mais quand utiliser cette syntaxe ?

Elle est intéressante quand tu souhaites faire des manipulations ou des conditions, voici un exemple :

De cette manière, tu as la capacité de :

• calculer des données dynamiques comme avec inverseFruit
• utiliser des if ou des switch pour faire des manipulations et retourner des JSX différents en fonction des données

Attention, même quand tu fais ça, il ne faut jamais oublier les key 😉

Pourquoi on utilise .map pour afficher une liste en React ?

Afin de mieux comprendre comment fonctionne React et le JSX, on va transformer le JSX en JavaScript pour mieux le comprendre.

Si on transpile le JSX en JavaScript, c'est ce que React fait quand tu build ton application, on peut se rendre compte que le résultat est le suivant :

const Fruits = () => {
  return React.createElement(
    'ul',
    null,
    fruits.map((fruit) => React.createElement('li', { key: fruit }, fruit)) 
  );
};

Tu peux voir que ici, on passe comme children un tableau, car une fois exécuté, le .map retournera ceci :

const Fruits = () => {
  return React.createElement(
    'ul',
    null,
    [

      React.createElement('li', { key: 'mango' }, 'mango'), 
      React.createElement('li', { key: 'pineapple' }, 'pineapple'), 
      React.createElement('li', { key: 'banana' }, 'banana'), 
    ] 
  );
};

Ce qui est intéressant dans ce code c'est qu'on peut voir que React accepte des tableaux comme children, c'est pour ça qu'on peut utiliser la syntaxe .map qui vient retourner un tableau d'éléments JSX !