La syntaxe JSX n’est pas forcément facile à appréhender, imaginez du HTML dans un return…
Pour faire une boucle sur un tableau afin d’afficher une liste par exemple d’élément JSX, il existe plusieurs façons, mais la plus répandue (99% semble-t-il) est d’utiliser map qui est une méthode de l’objet Array, qui retourne un tableau avec le même nombre d’éléments que le tableau d’entrée)
Façon ES6, la plus compacte avec fonction flèche
<div>
{montableau.map((item, i) => <ObjectRow obj={item} key={i} />)}
</div>
Méthode avec le mot clé function
<div>
{montableau.map(function(object, i){
return <ObjectRow obj={item} key={i} />;
})}
</div>
Avec la boucle for
Cette méthode est rarement vue mais elle marche
<div>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</div>
https://stackoverflow.com/questions/22876978/loop-inside-react-jsx