title: Bootstrap Rows in ReactJS
body: <p>I am working with a reactJS app and have the following code:</p>
  
  <pre><code>renderProductBlock(product, index) {
      return (
          &lt;div className="product col-xs-4"&gt;
              &lt;span className="product-name"&gt;{product.name}&lt;/span&gt;
              &lt;span className="product-price"&gt;{product.price}&lt;/span&gt;
              &lt;a href="#" className="btn btn-primary"&gt;Buy Now&lt;/a&gt;
          &lt;/div&gt;
      );
  }
  
  renderProductList() {
      let blocks = [];
  
      _.forEach(product, (item, index) =&gt; {
          const productBlock = this.renderProductBlock(item, index);
  
          if(productBlock) {
              blocks.push(productBlock);
          }
      });
  
      return blocks;
  }
  
  render() {
      const productsBlock = this.renderProductList();
  
      if(productsBlock) {
          return (
              &lt;div className="products"&gt;
                  &lt;div className="row"&gt;
                    {productsBlock}
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }   
  }
  </code></pre>
  
  <p>Which is outputting HTML in this layout: </p>
  
  <pre><code>&lt;div class="products"&gt;
      &lt;div class="row"&gt;
        &lt;div class="product col-xs-4"&gt;
            Content
        &lt;/div&gt;
        &lt;div class="product col-xs-4"&gt;
            Content
        &lt;/div&gt;
        &lt;div class="product col-xs-4"&gt;
            Content
        &lt;/div&gt;
        &lt;div class="product col-xs-4"&gt;
            Content
        &lt;/div&gt;
        &lt;div class="product col-xs-4"&gt;
            Content
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What would be the best way for me to add bootstrap rows into these loops to wrap every 3 products in a row div like so: </p>
  
  <pre><code>&lt;div class="products"&gt;
      &lt;div class="row"&gt;
          &lt;div class="product col-xs-4"&gt;
              Content
          &lt;/div&gt;
          &lt;div class="product col-xs-4"&gt;
              Content
          &lt;/div&gt;
          &lt;div class="product col-xs-4"&gt;
              Content
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="product col-xs-4"&gt;
              Content
          &lt;/div&gt;
          &lt;div class="product col-xs-4"&gt;
              Content
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Sorry for the slightly simple question but I can't seem to get this right.</p>