Using Real Data

In the first few videos of this tutorial, we've been using hard-coded data. Let's switch to using some data from a server instead.

To do this, we'll use React's componentDidMount lifecyle hook to call out for the data when the component loads. Go ahead and delete the sample data from rowData (leave the empty array).

Then, add the following method above the render method:

// App.js
componentDidMount() {
    fetch('https://api.myjson.com/bins/15psn9')
      .then(result => result.json())
      .then(rowData => this.setState({ rowData }));
  }

Notice that we're calling setState to set the rowData, which will in turn be passed into our AgGridReact component as a prop.

If you run npm start and head over to localhost:3000, you should now see a much larger data set. Awesome!

Can we do anything with this data? Let's learn how to select rows in the next video.