title: use axios with react to get data from api
body: <p>I am trying to use axios to get data from the api (<a href="https://reqres.in/" rel="nofollow noreferrer">https://reqres.in/</a>) and display in my react app. Before this I fetched the data from the API using fetch method in javascript. Now I have tried coding this from various resources. How should I do it. Is it the correct method?</p>
  
  <p>My app.js file-</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css'; 
  import axios from 'axios';
  
  class App extends Component {
    constructor(props) {
      super(props);
    this.successShow = this.successShow.bind(this);
    this.errorShow = this.errorShow.bind(this);
  }
  componentDidMount() {
   axios.get('https://reqres.in/api/products/3')
     .then(function (response) {
       this.successShow(response);
     })
     .catch(function (error) {
       this.errorShow(error);
     });
   }
  successShow(response) {
   this.member = &lt;pre&gt;{JSON.stringify(response.data, null, '\t')}&lt;/pre&gt; ;
  }
  errorShow(error) {
   this.member = &lt;pre&gt;{JSON.stringify(error.response.data, null, '\t')}&lt;/pre&gt;;
  }
  render() {
    return (
      &lt;div&gt;
        &lt;h2&gt;Welcome to React&lt;/h2&gt;
        &lt;h3&gt;{JSON.stringify(this.state.person.data)}&lt;/h3&gt;
        &lt;div&gt;{this.member}&lt;/div&gt;
      &lt;/div&gt;
    );
    }
   }
  export default App;
  </code></pre>
  
  <hr>
  
  <p>It also gives the error - Unhandled Rejection (TypeError): Cannot read property 'errorShow' of undefined.</p>