title: ReactJs - Array of data to Grid
body: <p>I am developing my first website with react and I was wondering how can I, from a json array, create something as a Instagram? I mean by that using the <code>grid</code> system</p>
  <pre><code>&lt;div class='col-lg-4'/&gt; // by example
  </code></pre>
  <p>I have this json:</p>
  <pre><code>[
      {
          &quot;ID&quot;: 2,
          &quot;Name&quot;: &quot;Michael Jordan's Jersey&quot;,
          &quot;Price&quot;: 70,
          &quot;PictureURL&quot;: &quot;http://nba.frgimages.com/FFImage/thumb.aspx?i=/productimages/_1098000/altimages/ff_1098879alt3_full.jpg&amp;w=600&quot;
      },
      {
          &quot;ID&quot;: 3,
          &quot;Name&quot;: &quot;Paul Pogba's Jersey&quot;,
          &quot;Price&quot;: 50,
          &quot;PictureURL&quot;: &quot;https://www.soccerpro.com/images/soccerpro/main/724615_439pog_nike_paul_pogba_france_home_jsy_01.jpg&quot;
      }
  ]
  </code></pre>
  <p>Which is return from my API and I would like to 'render' these items with the logic of Instagram style, by case, by a grid, something like that.</p>
  <p>At the moment, I have that:</p>
  <pre><code>constructor(props) {
    super(props);
    this.state = {
      articles_list: null
    }
  }
  
  componentWillMount() {
    fetch(&quot;http://127.0.0.1:8079/products&quot;)
    .then(results =&gt; {
      return results.json()
    }).then(json =&gt; {
      this.setState({
        articles_list: json
      });
    });
  }
  </code></pre>
  <p>What should I put in <code>render()</code> ?</p>
  <p>Thanks for any help! Advices are welcome too</p>
  <h2>Edit 1:</h2>
  <p>I then updated my code:</p>
  <pre><code>export default class ArticlesView extends React.Component {
  
      constructor(props) {
        super(props);
        this.state = {
          type: props.type,
          articles_list: null
        }
      }
  
      componentWillMount() {
        fetch(&quot;http://127.0.0.1:8079/products&quot;)
        .then(results =&gt; {
          return results.json()
        }).then(json =&gt; {
          this.setState({
            articles_list: json
          });
        });
      }
  
      render() {
      
        if (this.state.articles_list) {     
          return this.state.articles_list.map(article =&gt; {
            return (
              &lt;div className='col-lg-4' key={article.ID}&gt;
                {article.Name} - {article.Price}
              &lt;/div&gt;
            )
          })
        }
        // if this.state.articles_list is empty, show a loading spinner or whatever...
        return &lt;div&gt;Nothing yet&lt;/div&gt;
      }
  }
  </code></pre>
  <blockquote>
  <p>Nothing yet</p>
  </blockquote>
  <p>is present, however, the articles aren't showed, I see this error:</p>
  <blockquote>
  <p>Uncaught (in promise) Error: ArticlesView.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.</p>
  <p>at invariant (bundle.js:8823)</p>
  <p>at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:15416)</p>
  <p>at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (bundle.js:9141)</p>
  <p>at ReactCompositeComponentWrapper._updateRenderedComponent (bundle.js:15363)</p>
  <p>at ReactCompositeComponentWrapper._performComponentUpdate (bundle.js:15347)</p>
  <p>at ReactCompositeComponentWrapper.updateComponent (bundle.js:15276)</p>
  <p>at ReactCompositeComponentWrapper.wrapper [as updateComponent] (bundle.js:9141)</p>
  <p>at ReactCompositeComponentWrapper.performUpdateIfNecessary (bundle.js:15224)</p>
  <p>at Object.performUpdateIfNecessary (bundle.js:13398)</p>
  <p>at runBatchedUpdates (bundle.js:13980)</p>
  </blockquote>
  <p>PS: I don't get how to use the console to understand what's the problem ..</p>