How to loop inside JSX?

You can simply use with ES6 arrow function syntax.

For example, the items array of objects is mapped into an array of components:

{ => (
<SomeComponent key={} name={} />

But you can't iterate using for loop:

for (let i = 0; i < items.length; i++) {
<SomeComponent key={items[i].id} name={items[i].name} />

This is because JSX tags are transpiled into function calls, and you can't use statements inside expressions. This may change thanks to do expressions which are stage 1 proposal.

December 30, 2021