How to write a loop inside JSX React

In case you are wondering…

• How to write a for-loop in JSX?

• How to render repeating React elements?

… then you have landed at the right blog post. And it is quite simple.

If this was your code considering ItemRow as a seperate React component that you want to repeat, then this is how you would repeat the React component render:

<div>
    for (var i=0; i < items.length; i++) {
        <ItemRow itm={items[i]} key={i}>
    } 
</div>

Then this is how you would write it in JSX using the map method:

<div>
    {items.map((item, i) => <ItemRow itm={item} key={i} />)}
</div>

Hope this helps! Please feel free to share. Thank you!