title: Creating a Grid Layout using React
body: <p>I have an array of objects and I want to display them in 6 Rows and 3 Cols Grid. I am using the following code.</p>
  
  <pre><code> const GridLayout = (props) =&gt; {
          let layout = [];
          let total_articles = props.articles.length;
          let nRows = total_articles / 3;
          let nCols = 3;
  
          for (let i = 0; i &lt; nRows; i++) {
              layout.push(&lt;div className="row"&gt;);
              for (let j = 0; j &lt; nCols &amp;&amp; (i * nCols) + j &lt; total_articles; j++) {
                      layout.push(
                      &lt;div key={(i * nCols) + j} className="col-md-4 column"&gt;
                          &lt;ArticleCard articleDetails={props.articles[(i * nCols) + j]}/&gt;
                      &lt;/div&gt;)
              }
                  layout.push(&lt;/div&gt;);
          }
          return (
              &lt;div id={"mainContent"} className="container"&gt;
                  {layout}
              &lt;/div&gt;
          )
      };
  </code></pre>
  
  <p>The first and last layout.push() are causing an issue and giving me a syntax error. If i remove them it works but just adds all the articles in one row, while I want it in 6 different rows.</p>
  
  <p>I have a feeling I might have over complicated this and there must be a better way to accomplish the same thing, so would appreciate any help!</p>