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 data =  ['red', 'green', 'blue']

using angular i would have done something like this in my html:

<div ng-repeat="i in data">{{i}}</div>

I am wondering the React's markup to do this

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 (<div>
        { this.props.data.map(function(item) {
                return <div>{item}</div>
            })
        }
        </div>);
    }
});

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

React.render(<List data={ data }  />, 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.