How to loop inside JSX?
You can simply use Array.prototype.map with ES6 arrow function syntax. For example, the items array of objects is mapped into an array of components:
1 2 3 | <tbody> {items.map(item => <SomeComponent key={item.id} name={item.name} />)} </tbody> |
But you can’t iterate using for loop:
1 2 3 4 5 | <tbody> for (let i = 0; i < items.length; i++) { <SomeComponent key={items[i].id} name={items[i].name} /> } </tbody> |
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.
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
