How to do API Calling using ReactJS and Axios

This blog post teaches you how to consume REST APIs in react using Axios. Axios is a promise based HTTP client. You can also use Fetch API from react to fetch data from third-party APIs. If you want to know the exact difference between Axios and Fetch, just read this nicely written article.

Firstly create a new react project using the following command:
npx create-react-app my-app

Now install axios library using the following command:
npm install axios

Copy and paste the following code into App.js.

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';

const URL = 'https://api.coindesk.com/v1/bpi/currentprice.json';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inDollars: '---',
      inEuro: '---',
      inPounds: '---',
    };
  }

  componentDidMount() {
    axios.get(URL).then(response => response.data)
      .then((data) => {
        this.setState({
          inDollars: data.bpi.USD.rate,
          inEuro: data.bpi.EUR.rate,
          inPounds: data.bpi.GBP.rate,
        });
      });
  }

  render() {
    const { inDollars, inEuro, inPounds } = this.state;
    return (
      <div className="App">
        <h1>Price of 1 Bitcoin</h1>
        <h2>
          USD:
          {' '}
          {inDollars}
        </h2>
        <h2>
        EURO:
          {' '}
          {inEuro}

        </h2>
        <h2>
        GBP:
          {' '}
          {inPounds}
        </h2>
      </div>
    );
  }
}

export default App;

In the example above, I am using API from coindesk to check the price of Bitcoin in USD, EURO and GBP. We initiate API call in componentDidMount with axios and save the data from response promise in the state. Also, replace App.css with the following code.

.App {
  height: 100vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Now, run the project and the output will be as seen in the screenshot given below: