React equivalent for ng-repeat

Question

I am new to React.js. I am trying to bind data arrays. I am looking for the equivalent of ng-repeat, but i can\'t find it inside documentation.

e.g:

var         


        

Answer 1

In React, you just write the necessary JavaScript (and potentially build it into a reusable control as you'll see). It's very prescriptive and easy to do once you learn the basic patterns (and how they differ from AngularJS).

So, in the render function, you'd need to iterate through the list. In the example below, I've used map, but you could use other iterators as needed.

var List = React.createClass({
    render: function() {
        return (

        { this.props.data.map(function(item) {
                return 
{item}
            })
        }
        
);
    }
});

var data =  ['red', 'green', 'blue'];

React.render(, document.body);

Here it is in use.

And, as you can see, you can quickly build a reusable component that can "repeat" through the list.