How do I use for loops with react?
With map you can do:
Users.map((user, index) => (
<MenuItem eventKey={index}>user.firstname</MenuItem>
));
The render
method of your component, or your stateless component function, returns the elements to be rendered.
If you want to use a loop, that's fine:
render() {
let menuItems = [];
for (var i = 0; i < Users.length; i++) {
menuItems.push(<MenuItem eventKey=[i]>User.firstname[i]</MenuItem>);
}
return <div>{menuItems}</div>;
}
More common would be to see a more functional style, such as using a map to return the array of elements:
render() {
return <div>
{
Users.map((user, i) =>
<MenuItem eventKey=[i]>User.firstname[i]</MenuItem>)
}
</div>;
}
Note that in either case, you are missing the key
property from each element of your array, so you will see warnings. Each element in an array should have a unique key, preferably some form of ID rather than just the array index.