Create loop inside React JSX

While playing with React I needed to create a loop to print a defined number of items. I was surprised that using JSX it wasn't very intuitive how to do so. After some Googling, this is what I found.

The magic map function will accept an empty array of your defined length. In my case, 7.

Array.apply(null, Array(7)).map(function(item, i) {}

When using it inside a React component it looks like this:

var MyComponent = React.createClass({ render:function(){ return ( <div> {Array.apply(null, Array(7)).map(function(item, i){ return ( <div> This will print the counter {i} </div> ); }, this)} </div> ); } });

Do you know of a simpler way of creating a loop, such as a for, inside a React component?


Leave a Reply

Add <code> Some Code </code> by using this tags.