Loop inside React JSX

Question

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component):

<tbody>     for (var i=0; i < numrows; i++) {         <ObjectRow/>     }  </tbody> 

I realize and understand why this isn't valid JSX, since JSX maps to function calls. However, coming from template land and being new to JSX, I am unsure how I would achieve the above (adding a component multiple times).

Answer 1

I am not sure if this will work for your situation, but often map is a good answer.

If this was your code with the for loop:

<tbody>     for (var i=0; i < objects.length; i++) {         <ObjectRow obj={objects[i]} key={i}>     } </tbody> 

You could write it like this with map:

<tbody>     {objects.map(function(object, i){         return <ObjectRow obj={object} key={i} />;     })} </tbody> 

ES6 syntax:

<tbody>     {objects.map((object, i) => <ObjectRow obj={object} key={i} />)} </tbody> 

Answer 2

Think of it like you're just calling JavaScript functions. You can't use a for loop where the arguments to a function call would go:

return tbody(     for (var i = 0; i < numrows; i++) {         ObjectRow()     }  ) 

See how the function tbody is being passed a for loop as an argument – leading to a syntax error.

But you can make an array, and then pass that in as an argument:

var rows = []; for (var i = 0; i < numrows; i++) {     rows.push(ObjectRow()); } return tbody(rows); 

---

You can basically use the same structure when working with JSX:

var rows = []; for (var i = 0; i < numrows; i++) {     // note: we are adding a key prop here to allow react to uniquely identify each     // element in this array. see: https://reactjs.org/docs/lists-and-keys.html     rows.push(<ObjectRow key={i} />); } return <tbody>{rows}</tbody>; 

Incidentally, my JavaScript example is almost exactly what that example of JSX transforms into. Play around with Babel REPL to get a feel for how JSX works.