How to Loop inside React JSX

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. 

    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.

4 years ago

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>

4 years ago