Making an API call in React

Here is a simple example using a live API (https://randomuser.me/)... It returns an array of objects like in your example:

import React from 'react';

class App extends React.Component {
  state = { people: [], isLoading: true, error: null };

  async componentDidMount() {
    try {
      const response = await fetch('https://randomuser.me/api/');
      const data = await response.json();
      this.setState({ people: data.results, isLoading: false });

    } catch (error) {
      this.setState({ error: error.message, isLoading: false });
    }
  }

  renderPerson = () => {
    const { people, isLoading, error } = this.state;

    if (error) {
      return <div>{error}</div>;
    }

    if (isLoading) {
      return <div>Loading...</div>;
    }

    return people.map(person => (
      <div key={person.id.value}>
        <img src={person.picture.medium} alt="avatar" />
        <p>First Name: {person.name.first}</p>
        <p> Last Name: {person.name.last}</p>
      </div>
    ));
  };

  render() {
    return <div>{this.renderPerson()}</div>;
  }
}

export default App;

Does it make sense? Should be pretty straight forward...

Live Demo Here: https://jsfiddle.net/o2gwap6b/

You will want to do something like this:

var url = 'https://myAPI.example.com/myData';
fetch(url).then((response) => response.json())
          .then(function(data) { /* do stuff with your JSON data */})
          .catch((error) => console.log(error));

Mozilla has extremely good documentation on using fetch here that I highly recommend you read.

The data parameter in the second .then will be an object parsed from the JSON response you got and you can access properties on it by just using the property label as was in the JSON. For example data.title would be "Request from Nancy".

If you are struggling with fetch, Axios has a much simpler API to work with.

Try this in your API.js file (of course install axios first with npm i --save axios):

import axios from 'axios'
import mockRequests from './requests.json'

export const getRequests = (url) => {
  if (url) {
    return axios.get(url).then(res => res.data)
  }

  return new Promise((resolve, reject) => { // you need to return the promise
    setTimeout(() => resolve(mockRequests), 500)
  })
})

In your component, you can access the getRequests function like so

import React, { Component } from 'react'
import { getRequests } from './API.js'

class App extends Component {
  state = { 
    data: null
  }

  componentWillMount() {
    getRequests('http://somedomain.com/coolstuff.json').then(data => {
      console.log(data)
      this.setState({ data })
    })
  }

  render() {
    if (!this.state.data) return null

    return (
      <div className='App'>
        {this.state.data.title}
      </div>
    )
  }
}

export default App