Comment générer le rendu de tableaux dans React

Introduction

Au cours de cet article, vous allez apprendre à générer le rendu d’un tableau dans React et aborder les meilleures pratiques à utiliser pour générer le rendu de différents éléments dans des composants.

L’un des avantages d’un langage web moderne comme JavaScript, c’est qu’il vous permet d’automatiser rapidement la génération de blocs HTML.

En utilisant comme une sorte de boucle sur un tableau ou un objet, il vous suffira d’écrire le HTML une seule fois pour chaque élément. Mieux vaut appliquer les futures modifications qu’une seule fois dès maintenant.

Rendu de plusieurs éléments

Pour afficher plusieurs éléments JSX dans React, vous pouvez boucler un tableau en utilisant la méthode .map() et renvoyer un seul élément.

Ci-dessous, vous parcourez le tableau reptiles et retournez un élément li pour chaque article du tableau. Vous pouvez utiliser cette méthode pour afficher un seul élément pour chaque article du tableau :

function ReptileListItems() {
  const reptiles = ["alligator", "snake", "lizard"];

  return reptiles.map((reptile) => <li>{reptile}</li>);
}

La sortie finale ressemblera à ceci :

Output
- alligator
- snake
- lizard

Dans l’exemple suivant, vous allez voir les raisons pour lesquelles vous souhaitez ajouter une key unique à une liste d’éléments rendue sous forme d’un tableau.

Rendu d’un ensemble d’éléments dans un composant

Dans cet exemple, vous parcourez un tableau et créez une série de composants d’articles de liste comme dans l’exemple précédent.

Pour commencer, mettez à jour le code pour utiliser le composant <ol> afin de conserver les articles <li>. Le composant <ol> créera une liste des articles classée :

function ReptileList() {
  const reptiles = ["alligator", "snake", "lizard"];

  return (
    <ol>
      {reptiles.map((reptile) => (
        <li>{reptile}</li>
      ))}
    </ol>
  );
}

Cependant, si vous regardez la console, vous verrez un avertissement signalant que chaque enfant qui se trouve dans un tableau ou un itérateur doit avoir une clé unique.

L’avertissement apparaît car vous devez ajouter une key à chaque fois que vous tentez d’afficher une collection dans un composant.

Sous React, la key unique sert à déterminer sur quels composants d’une collection un rendu doit être régénéré. En ajoutant une key unique, React n’a pas à régénérer le rendu de l’ensemble du composant à chaque mise à jour.

Au cours de cette étape, vous allez générer le rendu de plusieurs éléments dans un composant et ajoutez une key unique. Mettez à jour le code pour inclure une key sur les éléments de la liste afin de stopper l’avertissement :

function ReptileList() {
  const reptiles = ['alligator', 'snake', 'lizard'];

  return (
    <ol>
      {reptiles.map(reptile => (
        <li key={reptile}>{reptile}</li>
      ))}
    </ol>
  );
}

Maintenant que vous avez ajouté une key, l’avertissement n’apparaîtra plus dans la console.

Dans l’exemple suivant, vous allez découvrir de quelle manière générer le rendu des éléments adjacents sans aucune erreur de syntaxe habituelle.

Rendu des éléments adjacents

En JSX, pour générer le rendu de plusieurs éléments d’un composant, vous devez les englober dans un habillage.

Dans cet exemple, vous devez tout d’abord renvoyer une liste des éléments qui n’ont pas été parcourus par un tableau :

function ReptileListItems() {
  return (
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  );
}

Vous verrez apparaître une erreur persistante dans la console :

Pour corriger cette erreur, il vous faut envelopper le bloc des éléments li dans un habillage. Lorsqu’il s’agit d’une liste, vous pouvez les envelopper dans un élément ol ou ul :

function ReptileListItems() {
  return (
  <ol>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  </ol>
  );
}

Maintenant, les éléments <li> adjacents sont enveloppés dans une balise fermée, <ol>, et l’erreur a disparu.

Dans la section suivante, vous allez générer le rendu d’une liste dans un habillage en utilisant un composant fragment.

Rendu des éléments adjacents avec React.fragment

Avant React v16.2, vous pouviez habiller un bloc de composants dans un élément <div>. Cela générait une application pleine de divs, souvent appelée “div soup”.

Pour résoudre ce problème, React a lancé un nouveau composant connu sous le nom de composant fragment :

Pour générer le rendu d’une liste à l’intérieur d’une balise close tout en évitant d’utiliser une div, utilisez plutôt React.Fragment :

function ReptileListItems() {
  return (
  <React.Fragment>
     <li>alligator</li>
     <li>snake</li>
     <li>lizard</li>
  </React.Fragment>
  );
}

Le code rendu comprendra uniquement les éléments li et le composant React.Fragment n’apparaîtra pas dans le code.

Notez également que vous n’avez pas besoin d’ajouter une clé avec React.fragment.

Vous remarquerez qu’il est plus fastidieux d’écrire React.fragment que d’ajouter un <div>. Heureusement, l’équipe React a développé une syntaxe plus courte pour représenter ce composant. Vous pouvez utiliser <> </> à la place de <React.Fragment></React.Fragment> :

function ReptileListItems() {
  return (
 <>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
 </>
  );
}

Conclusion

Cet article vous a permis de découvrir des méthodes de générer le rendu de tableaux dans une application React.

Lorsque vous générez le rendu d’un élément dans un autre composant, vous devez utiliser une key unique et envelopper vos éléments dans un élément d’habillage.

En fonction de votre cas d’utilisation, vous pouvez créer des listes simples habillées dans un composant fragment qui n’a pas besoin de clé.

Pour en savoir plus sur les meilleures pratiques de React, suivez la série complète Comment coder dans React.js mise à votre disposition sur DigitalOcean.