React Js— Fetching Data From An API

3 min readOct 15, 2019

These React JS blogs are a part of my personal journey with React JS.

This basic task involves fetching an API and displaying a simple list. I think it is perfect practice for beginners and those looking to revise their knowledge.

Getting Started

Ensure that you have Node.js installed on your PC. To check,

run npx — help. If a list of options is returned, you’re good. If not , please download Node.js.

Next , go into your desired directory and run the following command to create your project,

create-react-app reactapi

Open the project you just created , called reactapi, using a text editor such as Visual Studio Code.

Setting up the Project

In your newly created project, head to the App.js file and make the following changes so that you are left with just the following code:

import React, { Component } from "react";class App extends Component {render() {return (<div className="App"></div>);}}export default App;

I then suggest you run npm start to test if your application works fine, it will open on the browser automatically once you run the command in your terminal.

The constructor and states

Next, we create a constructor function. We then define the state of the app, we will use two states, one is items which is an array of the data we will fetch from the api and the second is the isLoaded state to know when the items have been loaded from the api.

constructor(props) {super(props);this.state = {items: [],isLoaded: false};}

ComponentDidMount()

Next , we create a component called Did Mount. We will create an api caller , the fetch method, to take the first argument of the url part of the api.

We will use the following api that is good for testing:

https://jsonplaceholder.typicode.com/users

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
]

If you open the link on your browser you can see that it is one array of multiple json objects.

componentDidMount() {fetch(“https://jsonplaceholder.typicode.com/users").then(res => res.json()).then(json => {this.setState({isLoaded: true,items: json});});}

We put the link as an argument of the fetch function and convert it to json format. We then set the state of items to json which contains the data from the api and set isLoaded to true, because we got the data.

The data is now saved in the component so we can use it.

The render method

render() {var { isLoaded, items } = this.state;if (!isLoaded) {return <div>Loading..</div>;} else {return (<div className=”App”><ul>{items.map(item => (<li key={item.id}>{item.name} | {item.email}</li>))};</ul></div>);}return <div className=”App”></div>;}

Here it is said that if the data has not loaded , display text saying Loading .. or if the opposite is true return a list. We used the JavaScript map function which creates a new array that allows us to loop through each object in the api result.

The result in your browser after running npm start should be: