All Articles

How to write a loop inside JSX React

React JS Code

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:

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

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

    {, i) => <ItemRow itm={item} key={i} />)}

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