title: react.js every nth item add opening tag or closing tag
body: <p>I'm having trouble with this logic since react/jsx does not allow for non closing tags to be added to an array/child component. For example with bootstrap css I want to add a row for <b>every</b> 4 columns.</p>
  
  <p>So the logic is as follows:</p>
  
  <p>Add a opening row ex: <code>&lt;div className="row"&gt;</code>, then loop inside this row and every loop append a column ex: <code>&lt;div className="column&gt;{this.data}&lt;/div&gt;</code> when the loop reaches 4 check with <code>if(i % 4 == 0)</code> and add a closing <code>&lt;/div&gt;</code> tag while adding new row tag <code>&lt;div className="row"&gt;</code>;</p>
  
  <p>The code below <i><strong>would</strong></i> work in another language but in react this is not doable since we push a closing tag and a opening tag (which is invalid jsx):</p>
  
  <pre><code>generateColumns(columns) {
   let newColumns = [];
  
   columns.forEach(function(column, idx) {
    newColumns.push( &lt;div className="column"&gt; some data &lt;/div&gt; );
  
    if (idx % 4 == 0) {
     // Here we end the row and start a new row, works in any other language.
     newColumns.push( &lt;/div&gt; &lt;div className="row"&gt; );
    }
   });
  
   // This array now has the proper tags for opening a row every 4th item and closing it.
   return newColumns;
  },
  render() {
     return (
       &lt;div className="row"&gt;
         {this.generateColumns(this.props.columns)}
       &lt;/div&gt;
     )
  }
  </code></pre>
  
  <p>The expected output would be:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="column"&gt;
     Some data
    &lt;/div&gt;
    &lt;div class="column"&gt;
     Some more data
    &lt;/div&gt;
    &lt;div class="column"&gt;
     Other data
    &lt;/div&gt;
    &lt;div class="column"&gt;
     Something else
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="column"&gt;
     Some data
    &lt;/div&gt;
    &lt;div class="column"&gt;
     Some more data
    &lt;/div&gt;
    &lt;div class="column"&gt;
     Other data
    &lt;/div&gt;
    &lt;div class="column"&gt;
     Something else
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>//the above would be repeated and new rows would appear every 4 columns.</code></p>