La boucle for dans React

1. Implémenter for Map avec la méthode .map() dans React
2. Boucle for en JavaScript
3. Fonction immédiatement invoquée

Traiter des données back-end complexes fait partie du travail du développeur front-end. Souvent, les données incluent une liste d’objets qui représentent des composants ou d’autres blocs de construction pour l’interface utilisateur.

Par exemple, lors de la création d’une boutique en ligne, les données contiendront probablement la liste des produits qui doivent apparaître sur le site Web. Parcourir manuellement la liste et créer des composants un par un est inefficace pour plusieurs raisons. Par exemple, que ferez-vous si un produit est supprimé ou ajouté à la liste ? Vous ne pouvez pas revenir en arrière et mettre à jour votre fichier JSX à chaque fois.

Il existe plusieurs façons de parcourir la liste et de rendre automatiquement les composants ou les éléments HTML.

Implémenter for Map avec la méthode .map() dans React

La méthode .map(), introduite dans ES6, est le moyen par défaut de boucler sur un tableau et de renvoyer un élément JSX valide contenant les données de chaque élément du tableau. Les développeurs utilisent souvent cette méthode pour créer des composants personnalisés ainsi que des éléments HTML normaux.

Même s’il existe d’autres façons d’effectuer une boucle, la plupart des développeurs React utilisent la méthode .map() car elle est facile à lire, à écrire et à maintenir. Voici comment parcourir un tableau d’objets et afficher les données utilisateur à l’écran :

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    console.log('App started');
    return <div>
    {data.map(person => <p key={person.name}>{`${person.name}, ${person.age} years old`}</p>)}
    </div>
  }
}

Production:

John Doe, 44 years old

Jane Doe, 45 years old

N’oubliez pas que la méthode map() s’exécutera deux fois dans cet exemple et renverra un élément de paragraphe à chaque fois. C’est pourquoi il est indispensable d’envelopper ses résultats d’un <div></div>. Chaque composant doit renvoyer un conteneur parent, ayant autant d’éléments enfants que vous le souhaitez.

Attribut key

Gardez à l’esprit que chaque élément créé à l’aide de la méthode .map() doit avoir un identifiant key, défini sur une valeur unique.

<p key={person.name}>{}</p>)

React ne recommande pas d’utiliser la valeur index pour générer une valeur unique pour la propriété key.

Transmettre des props

Si vous comptez utiliser la méthode .map() pour afficher plusieurs composants, vous pouvez également transmettre les accessoires.

Disons que nous essayons de rendre plusieurs composants Product. Voici comment nous passerions les accessoires :

return <div>
    {data.map(product => <Product price={product.price} name={product.name}></Product>)}
    </div>

Boucle for en JavaScript

Une autre façon de boucler sur un tableau est d’utiliser la boucle for. Si vous choisissez cette approche, vous devez effectuer la boucle au-dessus du bloc return.

Voici à quoi ressemblerait le code :

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    let persons = [];
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return <div>
    {persons}
    </div>
  }
}

Par rapport à .map(), cette approche est plus détaillée et plus difficile à comprendre. Cependant, les résultats seraient les mêmes.

Fonction immédiatement invoquée

Il est techniquement possible d’utiliser la boucle for dans votre instruction return, mais vous devrez créer une fonction et utiliser la boucle for comme corps. Une fois que vous avez terminé d’écrire la fonction, vous devez la suivre de crochets () pour l’appeler immédiatement. Voici comment cela fonctionnerait :

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    return 
    <div>
    {function() {
      let persons = []
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return persons
    }()
    }</div>
  }
}