How To Fetch Data From API In React Js

If you've fetch API using any programming language earlier then i would assume that you know basics of API. If you are a complete beginner then before jumping directly into it first let understand what API is ? & Why we need to use API ?

API calling with React js is be pretty similar. An API is basically a set of data, often in JSON format with specified endpoints. We want to access specific endpoints within that API framework to fetch & retrieve data from the API.

Fetch is how we request that data. We’re basically saying, “Hey API, that data is what I want, can you send me this data.” The server will then respond and be like, “Sure, I promise to send you the data.” We can also specify that how we need data to get fetch. JSON data is often the easiest to use.

I’ve selected a free & user friendly API know as jsonplaceholder to work with, which is a great one to use, especially if it’s your first time to work with API

In this code you will learn how to use basic features & how to fetch api in react js. In basic feature you will learn are componentDidMount, state and Render.

# API

                    
http://jsonplaceholder.typicode.com/users
                    
                  

Above is the API url which i've used in this project to fetch data. When you will go to that URL you will see data in JSON Format screenshot given below.

In above image is a screenshot of JSON format data which is generated through the URL. I've marked data which i'm going to fetch from API.

# Code

First start with declaring state.

                    
state = {
  contacts: []
};
                    
                  

After this will going to fetch data with componentDidMount(). It is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

                    
componentDidMount() {
  fetch('http://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then((data) => {
          this.setState({ contacts: data })
      })
      .catch(console.log)
}
                    
                  

Now, we have declared state & fetched data from API in above example. It's time to display data through render method in React js.

                    
import Contacts from './components/contacts';

render() {
  return (
    <Contacts contacts={this.state.contacts} />
  )
}
                    
                  

In above code we have send API data using states to Contact Module by importing it from another file. And now let's see how we catch fetched data in /components/contacts.js file.

                    
const Contacts = ({contacts}) => {
  return (
      <div>
          <center><h1>Contact List</h1></center>
          {contacts.map((contact) => (
              <div class="card">
                  <div class="card-body">
                      <h5 class="card-title">{contact.name}</h5>
                      <h6 class="card-subtitle mb-2 text-muted">{contact.email}</h6>
                      <p class="card-text">{contact.company.catchPhrase}</p>
                  </div>
              </div>
          ))}
      </div>
  )
};
                    
                  

Above is the full code of contact module which shows how we get data sent from app.js & then how convert that data into array using map() in react js. Here all our work is done & after running this app you will see result.

Steps after downloading files:

• 1. Go to folder through Terminal 2. npm install 3. npm run

You will get all files, when you download the source code. And after than you can edit it according to you

if you face any issues you can contact by asking question with article link.

You can go through Demo as well as Download source code for the same & make changes according to you