Loop inside React JSX Element

This is a simple but useful snippet code to create a loop inside a jsx element

Let’s say we want to iterate over the rows of a table and add a ObjectRow component each time we loop:

Old fashion approaches:

Option 1:

Option 2:

The elegant approach:

This is my preferred way to iterate on React and it’s pretty elegant using the .map function and using () to return the JSX element after iterate over it using the Arrow Function.

This is an easy snippet but a very useful when you’re starting with react

Have a blessed day :)