React equivalent for ng-repeat
Solution 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.
Solution 2
Should just be:
{data.map(i => <div>{i}</div>)}
Solution 3
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.
Solution 4
In your render function inside a react component you can do this:
var data = ['red', 'green', 'blue'];
var dataComponent = [];
data.forEach(function (dataValue) {
dataComponent.push(<div> {dataValue} </div>);
});
And now you can return the dataComponent.
Morrisda
Updated on July 10, 2022Comments
-
Morrisda almost 2 years
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
-
Mike almost 9 yearsDo I need a library to convert that ES6 function so it can display in Chrome?
-
Steve almost 9 yearsYou should probably use Grunt or Gulp and a suitable ES6+ to ES5 transpiler with JSX support, such as Reactify (if you're using Browserify) or Babel.
-
Muhammad Usama Mashkoor over 6 yearsThanks can you please also explain the this.props.data.map to..?
-
WiredPrairie over 6 years@usama -- look for docs about
Array.map.
It's just returning a<div>
for each item in thedata
array (as a new array). -
Muhammad Usama Mashkoor over 6 yearsThanks @WiredPrairie