How to get data as JSON from this API and display in in my Reactjs app

Question

I have my api with my backend: https://pure-reaches-69883.herokuapp.com/api/wallet-info

When I call this api using Postman or my browser it's working, but I have tried to call it in my browser using Axios so as to display the data but it's not working.

This is the code:

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

class Dashboard extends Component {
  state = { walletInfo: {} };

  componentDidMount() {
    const url = 'https://pure-reaches-69883.herokuapp.com/api/wallet-info';
    axios.get(url).then(response => response.json)
 
   .then((json) => {
     
    this.setState({ walletInfo: json })
 
   })  
  }
  render() {
    const { address, balance } = this.state.walletInfo;

    return (
      <div className="ml-5 mb-5 mt-5 maincontent-area-all-pages">
        <div className="my-5 mx-4">
        <h2>Hello Page not Found</h2>
        <div className='WalletInfo'>
          <div>Address: {address}</div>
          <div>Balance: {balance}</div>
        </div>
        </div>
    </div>
    )
  }
}

export default Dashboard;

Answer 1

You can try to do this

 async componentDidMount() { const url = 'https://pure-reaches-69883.herokuapp.com/api/wallet-info'; await axios.get(url).then(response => response.json).then((json) => { this.setState({ walletInfo: json }); }) }

Apply an await to axios to wait for the data to finish arriving.