reactjs create dynamic wrapper element in map() - loops

Question

i have issues to probably understand ReactJS well enough to create dynamic div wrapper in every five steps. To be more specific here is an example:
render() {
return (
<div className='holder'>
{this.props.elements.map(
(b,n) =>
{n%5 == 0 ? '<div class="grid grid-pad">' : ''}
<Component param={b} />
{n%5 == 0 ? '</div>' : ''}
)}
</div>
)
}
The results should look like this:
<div class='grid grid-pad'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
<div class='grid grid-pad'>
<div class='child'></div>
<div class='child'></div>
...
</div>
....
So the result would be that every 5 elements would be wrapped in div.
I am aware that this is not the right way, at this code actually it produces errors for not closed tags. Is there any way how to actually achieve similar functionality. Thank you in advance.

Answer 1

As you can't dynamically create a React component from a string quite like that. You'll just need to group the children manually and add them as a whole to a container within the render method.
Here's an example: http://jsfiddle.net/wiredprairie/ko8so1mu/.
If you were using something like lodash, you could reduce the number of lines of code below by using the take function.
render() {
// make all elements into Components
var elements = this.props.elements || [];
var components = elements.map(
(b) => {
return <Component param={b} />;
}
);
// then just group into chunks of 5
var groups = [];
var children = [];
while(components.length > 0) {
children.push(components.shift());
if (children.length === 5) {
groups.push(<div className="grid grid-pad">{children}</div>);
children = [];
}
}
// remaining children
if (children.length > 0 ) {
groups.push(<div className="grid grid-pad">{children}</div>);
}
return (
<div className='holder'>
{ groups }
</div>
);
}

Answer 2

This is how you could do it:
/** #jsx React.DOM */
var Parent = React.createClass({
getInitialState: function() {
return {
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
}
},
render: function() {
return(
<div>
<Child elements={this.state.list} />
</div>
);
}
});
var Child = React.createClass({
render: function() {
var itemsList = this.props.elements.map(function(element, index) {
if (index % 5 == 0) {
return (
<div> {element} </div>
);
}
});
return(
<div>
{itemsList}
</div>
);
}
});
React.render(<Parent />, document.getElementById('app'));
You keep the data in the Parent component then pass it to the Child component in props.
if you do console.log(itemsList) you can see what is happening inside map() method.
Here is JSFiddle.
Edit:
After you updated your question, here is something I quickly hacked, this is not the best way of doing it, but it works:
/** #jsx React.DOM */
var Parent = React.createClass({
getInitialState: function() {
return {
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
}
},
render: function() {
return(
<div>
<Child elements={this.state.list} />
</div>
);
}
});
var Child = React.createClass({
render: function() {
var arr_index = -1;
var itemsList = [];
var items = this.props.elements.map(function(item, i) {
if (i % 5 == 0) {
arr_index += 1
}
itemsList.push(<div> {item}, conatiner: {arr_index} </div>)
});
return (
<div>{itemsList}</div>
);
}
});
React.render(<Parent />, document.getElementById('app'));
You still need to tweak it a bit to meet your requirements, but basically it divides children into "containers", I guess that's what you were looking for.