Guide du débutant sur les boucles dans React JSX

Vous vous demandez comment créer des boucles dans React? En savoir plus sur JSX et comment utiliser des méthodes telles que la fonction de carte pour boucler à l'intérieur de React JSX et afficher une liste d'éléments.

JSX en bref

Si vous avez déjà travaillé avec React auparavant, il y a de fortes chances que vous savoir ce qu'est JSX, ou au moins en avoir entendu parler. JSX est une extension de syntaxe personnalisée à JavaScript qui est utilisée pour créer un balisage avec React. Cela pourrait vous rappeler un peu un langage de modèles, mais avec JSX, vous pouvez utiliser toute la puissance de JavaScript. Cependant, n'oubliez pas que JSX ne fonctionnera pas directement dans les navigateurs et nécessite une étape de génération pour convertir le balisage JSX en appels de fonction React.createElement .

 // Exemple JSX

revenir (
  

     Soumettre 
  
)

// Ce qui précède sera converti en quelque chose comme ça

return React.createElement (
    "div",
    {},
    React.createElement (
      "bouton",
      {
        onClick: e => {}
      },
      "Soumettre"
    )
  );

Vous pouvez en savoir plus à ce sujet sur le site Web de React .

Comment boucler dans JSX en utilisant la carte Fonction

Quand j'ai commencé avec React, j'ai réalisé tout à fait au début, je ne savais pas comment parcourir un tableau et afficher une liste d'éléments. La façon la plus courante de le faire est d'utiliser la fonction map qui renverra JSX. Vous aurez rarement besoin d'une boucle autre que celle-ci. Vous pouvez voir ci-dessous comment cela fonctionne.

 importez React depuis ‘react’

const RenderList = props => {
  animaux const = ["Dog", "Bird", "Cat", "Mouse", "Horse"];

  revenir (
    

      {animaux.map (animal => (
        
 {animal} 
      ))}
    
  );
};

Vous devriez voir une liste rendue. Cependant, si vous consultez le journal de la console, vous verrez qu'il y a un avertissement du type «Avertissement: chaque enfant dans une liste doit avoir un accessoire clé unique». Chaque fois que vous utilisez une boucle, il est important de fournir un attribut de clé unique . La raison en est que React utilise ces clés pour suivre si des éléments ont été modifiés, ajoutés ou supprimés. Eh bien, nous pourrions simplement utiliser un index de boucle, n'est-ce pas?

 return (
    

      {animaux.map ((animal, index) => (
        
 {animal} 
      ))}
    
  );

Grâce à l'ajout de clés, il n'y a plus d'avertissement dans la console. Cependant, vous devez en savoir plus. L'utilisation d'un index comme clé dans certaines situations pourrait nous conduire à un piège et provoquer des bugs.

Pourquoi la clé est-elle importante dans les boucles?

Comme je l'ai mentionné précédemment, React utilise l'attribut clé pour suivre si des modifications ont été apportées. Imaginez un scénario dans lequel vous avez une liste d'articles qui peuvent être réorganisés. Si les index sont utilisés comme clés et que nous changeons l'ordre des éléments, React le saura-t-il? Eh bien, ce n'est peut-être pas le cas, car même si l'ordre des éléments dans un tableau a changé, les clés ne l'ont pas changé. Par conséquent, la liste ne serait pas restituée.

Donc, en règle générale, si vous avez un tableau qui peut changer, utilisez un identifiant unique. S'il n'est pas disponible, créez-en un pour chaque élément avant le rendu de la liste. Sinon, il est correct d'utiliser un index pour l'attribut de clé .

 // Exemple avec un id

const RenderList = props => {
  animaux const = [
    { id: 1, animal: "Dog" },
    { id: 2, animal: "Bird" },
    { id: 3, animal: "Cat" },
    { id: 4, animal: "Mouse" },
    { id: 5, animal: "Horse" }
  ];

  revenir (
    

      {animals.map (item => (
        
 {item.animal} 
      ))}
    
  );
};

Jusqu'à présent, nous avons utilisé la fonction map directement dans l'expression return . Cependant, si vous le souhaitez, vous pouvez d'abord utiliser une variable pour stocker les résultats de la carte puis afficher le contenu de la variable.

 const renderAnimals = animals.map (item => (
    
 {item.animal} 
  ));

  return 
 {renderAnimals} 
;

Si vous préférez, vous pouvez même utiliser une fonction.

 const getAnimalsContent = animaux => animaux.map (item => (
    
 {item.animal} 
  ));

  return 
 {getAnimalsContent (animals)} 
;

Utilisation d'autres boucles dans React

99,99% du temps, j'utilise la fonction map pour afficher une liste d'éléments et, pour être honnête, je ne me souviens d'aucun scénario dans lequel je avait besoin d'une autre boucle. Néanmoins, vous n'y êtes pas lié et pouvez utiliser n'importe quelle boucle pour afficher une liste. Tout cela fonctionne très bien:

Pour

   const getAnimalsContent = animals => {
    let content = [];
    pour (laissez l'objet d'animaux) {
      content.push (
 {item.animal} 
);
    }
    renvoyer le contenu;
  };

  return 
 {getAnimalsContent (animals)} 
;

For-in

   const getAnimalsContent = animals => {
    let content = [];
    pour (laissez idx chez les animaux) {
      const item = animaux [idx];
      content.push (
 {item.animal} 
);
    }
    renvoyer le contenu;
  };

  return 
 {getAnimalsContent (animals)} 
;

For-standard

   const getAnimalsContent = animals => {
    let content = [];
    pour (soit i = 0; i <animaux.longueur; i ++) {
      const item = animaux [i];
      content.push (
 {item.animal} 
);
    }
    renvoyer le contenu;
  };

  return 
 {getAnimalsContent (animals)} 
;

Filtre

La fonction de filtre peut être utilisée avec map pour filtrer les éléments avant leur rendu. Par exemple, dans l'exemple ci-dessous, seuls les éléments "Souris" et "Cheval" seront affichés.

 // Filtrez tous les animaux qui ne contiennent pas le caractère "e".
  const getAnimalsContent = animaux =>
    animaux
      .filter (item => item.animal.includes ("e"))
      .map (item => 
 {item.animal} 
);

  return 
 {getAnimalsContent (animals)} 
;

Réduire

L'exemple de filtre ci-dessus peut être amélioré avec la méthode réduire donc au lieu d'avoir deux boucles – une pour le filtrage et une pour la création de contenu JSX, nous allons simplement en avoir un.

 const getAnimalsContent = animaux =>
    animals.reduce ((acc, item) => {
      if (item.animal.includes ("e")) {
        acc.push (
 {item.animal} 
);
      }
      retour acc;
    }, []);

  return 
 {getAnimalsContent (animals)} 
;

Si pour une raison quelconque vous souhaitez expérimenter, vous pouvez même utiliser la récursivité pour rendre une liste. Cependant, je ne recommanderais pas de le faire et, dans la plupart des cas, vous devriez vraiment vous en tenir à la fonction map .

 const getAnimalsContent = (animaux, content = []) => {
    si (! animaux.longueur) renvoie le contenu;
    const [item, ...restAnimals] = animaux;
    content.push (
 {item.animal} 
);
    return getAnimalsContent (restAnimals, content);
  };

  return 
 {getAnimalsContent (animals)} 
;

Comme vous pouvez le voir, il existe plusieurs façons différentes de rendre une liste d'éléments dans React. J'espère qu'après avoir lu cet article, vous êtes maintenant plus confiant avec React et savez comment utiliser les boucles dans JSX.