Qu'est-ce qui est utilisé pour afficher une liste de données dans JSX?

Pour afficher une liste de données en JSX, la méthode .map() des tableaux JavaScript est utilisée.

// Exemple de tableau de données
const items = ['Élément 1', 'Élément 2', 'Élément 3'];

// Affichage de la liste avec .map()
const List = () => (
  <ul>
    {items.map((item, index) => (
      // Il est obligatoire d'utiliser une clé unique pour chaque élément de la liste
      <li key={index}>{item}</li>
    ))}
  </ul>
);

map() parcourt chaque élément du tableau et retourne un nouveau tableau d'éléments React, qui sont ensuite rendus dans le DOM. Il est important d'utiliser une propriété key unique pour chaque élément de la liste. Cela aide React à mettre à jour efficacement l'interface utilisateur lors de changements dans la liste. La clé peut être un identifiant unique des données, ou, en son absence, l'indice de l'élément dans le tableau.