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?

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.
3 comments

Leave a Reply

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

*
*