While playing with React I needed to create a loop to print a defined number of items. I was surprised that using JSX it wasn't very intuitive how to do so. After some Googling, this is what I found.
The magic map function will accept an empty array of your defined length. In my case, 7.
Array.apply(null, Array(7)).map(function(item, i) {}
Code language: JavaScript (javascript)
When using it inside a React component it looks like this:
var MyComponent = React.createClass({
render:function(){
return (
<div>
{Array.apply(null, Array(7)).map(function(item, i){
return (
<div>
This will print the counter {i}
</div>
);
}, this)}
</div>
);
}
});
Code language: PHP (php)
Do you know of a simpler way of creating a loop, such as a for, inside a React component?
Eslint: Use the spread operator instead of ‘.apply()’
Actually, i am a problem related to this issue, since i need the for loop in my render method, and this is not possible
render() { return( {for( let i = 0; i<3; i++) { console.log(i) } } )}
Code language: JavaScript (javascript)for example this code is not acceptable in JSX
Try
{Array.apply(null, Array(count)).map((item, i) => This will print the counter {i} )}
Code language: JavaScript (javascript)Nice googling xD