Utiliser une boucle `for` dans React

Lorsqu’un tableau contient des produits, des utilisateurs ou d’autres enregistrements, React peut afficher un élément ou un composant pour chaque entrée. Utilisez .map() pour la transformation habituelle, où chaque entrée produit un élément ; choisissez une boucle JavaScript for lorsque ses étapes explicites rendent le traitement plus clair. Dans les deux cas, vous obtenez un tableau d’éléments que React peut afficher.

Afficher des listes dans React avec .map()

Commencez par les données à afficher. Cet exemple JavaScript autonome transforme chaque produit en libellé ; il n’utilise ni React ni ne monte de composant. La sortie ci-dessous est celle observée pour cet exemple JavaScript uniquement.

const products = [
  { id: "mug", name: "Ceramic mug", price: 12 },
  { id: "notebook", name: "Notebook", price: 8 },
];

const labels = products.map((product) => `${product.name}: $${product.price}`);
console.log(labels.join("\n"));

Ceramic mug: $12
Notebook: $8

Pour produire du JSX, transformez les mêmes données en éléments : products.map((product) => <li key={product.id}>{product.name}: ${product.price}</li>). Insérez le tableau obtenu dans le balisage à l’endroit voulu, par exemple <ul>{products.map((product) => <li key={product.id}>{product.name}</li>)}</ul>. React affiche directement le tableau ; ajoutez un conteneur uniquement si la structure de la page le nécessite. Les extraits JSX illustrent le rendu de React et ne sont pas couverts par les preuves d’exécution JavaScript ci-dessus.

Vous pouvez aussi transformer chaque enregistrement en composant réutilisable. Définissez function ProductCard(props) { return <li>{props.name}: ${props.price}</li>; }, puis affichez le composant ainsi : products.map((product) => <ProductCard key={product.id} name={product.name} price={product.price} />). Le composant enfant reçoit name et price dans son objet props et lit ces valeurs pour construire son rendu. Vous pouvez également lui transmettre l’enregistrement entier avec product={product}, puis lire props.product.name et props.product.price dans le composant. Choisissez l’interface qui rend explicites les données dont le composant a besoin.

Chaque élément frère produit par le mappage doit avoir une key unique parmi ses frères et stable pour un même enregistrement ; un identifiant provenant des données convient généralement. Évitez l’index du tableau lorsque des éléments peuvent être ajoutés, supprimés ou réordonnés : après une modification, un index peut désigner un autre enregistrement et amener React à associer l’état d’un composant au mauvais élément. React se sert de key pour faire correspondre les éléments de liste lors des mises à jour ; cette valeur n’est pas transmise à l’enfant comme prop. Consultez le guide de React sur l’affichage des listes pour en savoir plus sur les clés et le rendu des listes.

Utiliser une boucle JavaScript for

Une boucle JavaScript for est utile lorsque vous souhaitez construire les éléments en suivant des étapes explicites. Dans un composant, initialisez un tableau avant return, ajoutez-y un élément avec une clé pour chaque produit, puis insérez le tableau dans le balisage renvoyé. Voici le composant complet, présenté ligne par ligne ; il utilise les données products déclarées plus haut :

function ProductList() {
const items = [];
for (let i = 0; i < products.length; i += 1) {
const product = products[i];
items.push(<li key={product.id}>{product.name}: ${product.price}</li>);
}
return <ul>{items}</ul>;
}

Ce composant illustre React et JSX ; il ne fait pas partie de l’exemple JavaScript exécuté. La boucle s’exécute pendant que le composant prépare le résultat : une instruction ne peut pas être placée directement dans du JSX. Pour une transformation simple, élément par élément, .map() est généralement plus concise et permet de repérer facilement le lien entre chaque enregistrement et son élément. Une boucle peut être plus claire lorsque la construction du résultat nécessite plusieurs instructions ou des étapes conditionnelles. Dans les deux cas, les éléments renvoyés doivent avoir des clés stables.

Utiliser une fonction immédiatement invoquée

Une expression de fonction immédiatement invoquée (IIFE) peut contenir des instructions dans une expression JSX, mais c’est une façon peu courante d’afficher une liste. Par exemple, l’expression JSX {(() => { const items = []; for (let i = 0; i < products.length; i += 1) { const product = products[i]; items.push(<li key={product.id}>{product.name}</li>); } return items; })()} crée et renvoie immédiatement un tableau. Il s’agit d’une illustration syntaxique, pas d’un exemple React exécuté. Gardez la valeur renvoyée sur la même ligne que return ou placez-la entre parenthèses : un saut de ligne juste après return peut amener JavaScript à renvoyer undefined en raison de l’insertion automatique de points-virgules. Pour les listes ordinaires, .map() ou une boucle placée avant le return du composant sont plus faciles à lire et à maintenir.