React equivalent for ng-repeat

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.

Should just be:

{data.map(i => <div>{i}</div>)}

Here is an example using ES6, and a stateless component.

The below code demonstrates creating a menu by looping through a list of menu items.

import React from 'react';import Menu from 'material-ui/lib/menus/menu';import MenuItem from 'material-ui/lib/menus/menu-item';const menuItems = [    {route: '/questions', text: 'Questions'},    {route: '/jobs', text: 'Jobs'},    {route: '/tags', text: 'Tags'},    {route: '/users', text: 'Users'},    {route: '/badges', text: 'Badges'}    {route: '/questions/new', text: 'Ask Question'}].map((item, index) => <MenuItem key={index} primaryText={item.text} value={item.route} />);const Sidebar = ({history}) => (    <Menu        autoWidth={false}        onItemTouchTap={(e, child) => history.push(child.props.value)}    >        {menuItems}    </Menu>);export default Sidebar;

Basically what we're doing is just pure javascript iteration utilizing Array.map.