How to surround all X elements with class using React.js

Question

I just wanted to do something like the following:

<div class="container"> <div class="row"> <div class="col-md-4">content</div> <div class="col-md-4">content</div> <div class="col-md-4">content</div> </div> <div class="row"> <div class="col-md-4">content</div> <div class="col-md-4">content</div> <div class="col-md-4">content</div> </div> <!-- etc ... --> </div> 

For example, every 3 .col-md-4's wrapped in .row

I tried:

 rows.push(<div className="row">); for (var count = 0; count < 9; count++) { rows.push( <!-- content --> ); // Add closing and reopening divs every 3 elements if (count % 3 === 0) { rows.push(</div><div className="row">); } } rows.push(</div>); } 

This, unfortunately, does not work.

In addition, 3 and 9 are examples here, and I was wondering if there is a general approach.

Answer 1

You should not concatenate elements as a string, but create and compose reaction elements. First you can create an array of your elements with content, and then reduce it to groups and wrap it with a container:

 render() { var content = [ "content 1", "content 2", "content 3", "content 4", "content 5", "content 6", "content 7", "content 8", "content 9", "content 10" ]; var groupSize = 3; var rows = content.map(function(content) { // map content to html elements return <div className="col-md-4">{content}</div>; }).reduce(function(r, element, index) { // create element groups with size 3, result looks like: // [[elem1, elem2, elem3], [elem4, elem5, elem6], ...] index % groupSize === 0 && r.push([]); r[r.length - 1].push(element); return r; }, []).map(function(rowContent) { // surround every group with 'row' return <div className="row">{rowContent}</div>; }); return <div className="container">{rows}</div>; } 

Answer 2

If you are already using lodash , you might be interested in chunk :

 render: function() { var rows = [<div className="col-md-4">content</div>, ...] return _.chunk(rows, 3).map(function(group) { return <div className="row">{group}</div> }); } 

Answer 3

you cannot put only open / close tags inside arrays, collect columns inside an array and output them one at a time, with valid opening and closing tags:

 rows.push(<div className="row">{columns}</div>);