title: React: Render new row every 4th column
body: <p>I'm using <code>react</code> and I want to <code>render</code> a new row every 4th column.</p>
  
  <p>My code:</p>
  
  <pre><code>function Product(props) {
    const content = props.products.map((product) =&gt; (
          &lt;div className="row" key={product.id}&gt;       
            &lt;article key={product.id} className="col-md-3"&gt;&lt;/article&gt;
          &lt;/div&gt; )
    );
    return (
      &lt;div&gt;
          {content}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I tried with the approach by passing in a condition that looked like this:</p>
  
  <p><code>if (product.id % 4 == 1)</code>, around the columns, but it doesn't work...</p>
  
  <p>This is what I want to happen:</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="col-md-3"&gt;&lt;/div&gt;
  &lt;div class="col-md-3"&gt;&lt;/div&gt;
  &lt;div class="col-md-3"&gt;&lt;/div&gt;
  &lt;div class="col-md-3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-3"&gt;&lt;/div&gt;
  &lt;div class="col-md-3"&gt;&lt;/div&gt;
  &lt;div class="col-md-3"&gt;&lt;/div&gt;
  &lt;div class="col-md-3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>