ReactJs - Array of data to Grid

Question

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 grid system

<div class='col-lg-4'/> // by example

I have this json:

[
    {
        "ID": 2,
        "Name": "Michael Jordan's Jersey",
        "Price": 70,
        "PictureURL": "http://nba.frgimages.com/FFImage/thumb.aspx?i=/productimages/_1098000/altimages/ff_1098879alt3_full.jpg&w=600"
    },
    {
        "ID": 3,
        "Name": "Paul Pogba's Jersey",
        "Price": 50,
        "PictureURL": "https://www.soccerpro.com/images/soccerpro/main/724615_439pog_nike_paul_pogba_france_home_jsy_01.jpg"
    }
]

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.

At the moment, I have that:

constructor(props) {
  super(props);
  this.state = {
    articles_list: null
  }
}

componentWillMount() {
  fetch("http://127.0.0.1:8079/products")
  .then(results => {
    return results.json()
  }).then(json => {
    this.setState({
      articles_list: json
    });
  });
}

What should I put in render() ?

Thanks for any help! Advices are welcome too

Edit 1:

I then updated my code:

export default class ArticlesView extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        type: props.type,
        articles_list: null
      }
    }

    componentWillMount() {
      fetch("http://127.0.0.1:8079/products")
      .then(results => {
        return results.json()
      }).then(json => {
        this.setState({
          articles_list: json
        });
      });
    }

    render() {
    
      if (this.state.articles_list) {     
        return this.state.articles_list.map(article => {
          return (
            <div className='col-lg-4' key={article.ID}>
              {article.Name} - {article.Price}
            </div>
          )
        })
      }
      // if this.state.articles_list is empty, show a loading spinner or whatever...
      return <div>Nothing yet</div>
    }
}

Nothing yet

is present, however, the articles aren't showed, I see this error:

Uncaught (in promise) Error: ArticlesView.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

at invariant (bundle.js:8823)

at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:15416)

at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (bundle.js:9141)

at ReactCompositeComponentWrapper._updateRenderedComponent (bundle.js:15363)

at ReactCompositeComponentWrapper._performComponentUpdate (bundle.js:15347)

at ReactCompositeComponentWrapper.updateComponent (bundle.js:15276)

at ReactCompositeComponentWrapper.wrapper [as updateComponent] (bundle.js:9141)

at ReactCompositeComponentWrapper.performUpdateIfNecessary (bundle.js:15224)

at Object.performUpdateIfNecessary (bundle.js:13398)

at runBatchedUpdates (bundle.js:13980)

PS: I don't get how to use the console to understand what's the problem ..

Answer 1

You could try something like this:

render() {
  const articles = this.state.articles_list.map(article => {
    return (
      <div className='col-lg-4' key={article.id}>
        {article.Name} - {article.Price}
      </div>
    )
  })

  return (
    <div>
      {articles}
    </div>
  )
}

For what you want, I think the solution is more dependent on your HTML and CSS. The col-lg-4 class should automatically wrap to the next row when you run out of room.

From your updated question, you always need to wrap your components with a parent. For example, you can't return <div>Text</div><div>Text</div>. Instead, you'd want to wrap those two children in a parent component like this return <Parent><div>Text</div><div>Text</div></Parent>. Here's how you could update your code:

render() {
  if (this.state.articles_list) {
    const articles = this.state.articles_list.map(article => {
      return (
        <div className='col-lg-4' key={article.ID}>
          {article.Name} - {article.Price}
        </div>
      )
    })  
    return <div>{articles}</div>
  }

  // if this.state.articles_list is empty, show a loading spinner or whatever...
  return <div>Nothing yet</div>
}