Rendu de listes d'éléments (méthode `map()`)

Transformer les données en interface : le défi des listes

Dans la plupart des applications web, afficher des collections de données est une tâche omniprésente. Que ce soit une liste de produits, un flux de commentaires, des tâches à faire ou des résultats de recherche, nous devons souvent prendre un ensemble de données, généralement sous forme de tableau (array) JavaScript, et le transformer en une série d'éléments visibles dans l'interface utilisateur.

React excelle dans ce domaine en s'appuyant sur les fonctionnalités natives de JavaScript. La méthode la plus courante et la plus idiomatique pour réaliser cette transformation est la méthode `map()` des tableaux. Cette méthode permet d'itérer sur chaque élément d'un tableau et de lui appliquer une fonction de transformation, produisant ainsi un nouveau tableau contenant les résultats de cette transformation.

Le point clé est que `map()` retourne un nouveau tableau. En React, lorsque vous utilisez `map()` à l'intérieur des accolades `{}` dans votre JSX, vous pouvez transformer chaque donnée de votre tableau source en un élément React (comme un `

Mise en oeuvre pratique du rendu de listes avec `map()`

L'utilisation de `map()` pour le rendu de listes est directe. Vous prenez votre tableau de données et, à l'intérieur du JSX où vous souhaitez afficher la liste, vous appelez `map()` sur ce tableau. La fonction que vous passez à `map()` recevra chaque élément du tableau en argument et devra retourner l'élément JSX correspondant.

Commençons par un exemple simple : afficher une liste de nombres. Supposons que nous ayons un tableau `numbers = [1, 2, 3, 4, 5]`.

function NumberList(props) {
  const numbers = props.numbers;
  
  // Pour chaque nombre dans le tableau, on crée un élément 

  const listItems = numbers.map((number) =>
    // ATTENTION: Il manque la prop "key" ici. Nous la verrons au chapitre suivant.
    
{number}
  );

  return (
    

      {listItems} // On insère le tableau d'éléments 
 généré
    
  );
}

const numbers = [1, 2, 3, 4, 5];
// Utilisation: 
// Résultat DOM (simplifié): 
1
2
3
4
5

Généralement, vos données seront plus structurées, souvent sous forme de tableaux d'objets. `map()` fonctionne exactement de la même manière. Vous accédez aux propriétés de chaque objet pour construire votre JSX. Il est aussi très courant de mapper chaque objet à une instance d'un autre composant React.

// Un composant simple pour afficher un item de TODO
function TodoItem(props) {
  // ATTENTION: Il manque la prop "key" ici.
  return 
{props.text}
;
}

function TodoList(props) {
  const todos = props.todos; // Supposons: [{ id: 1, text: 'Apprendre React' }, { id: 2, text: 'Utiliser map()' }]

  return (
    

      {todos.map((todo) => 
        // On passe les données nécessaires au composant enfant via les props
        // La 'key' est cruciale et sera expliquée ensuite.
        
      )}
    
  );
}

const myTodos = [
  { id: 'a1', text: 'Sortir le chien' },
  { id: 'b2', text: 'Faire les courses' },
  { id: 'c3', text: 'Maîtriser les listes React' }
];
// Utilisation: 

Comme vous pouvez le voir dans les commentaires du code, l'utilisation de `map()` pour générer des listes en React soulève immédiatement la nécessité d'une prop spéciale : la `key`. Nous allons explorer pourquoi elle est indispensable et comment la choisir correctement dans le prochain sous-chapitre. Pour l'instant, retenez que `map()` est le mécanisme fondamental pour transformer dynamiquement des tableaux de données en listes d'éléments dans vos interfaces React.