Axios React Doesn't append information Get Request

Question

I've been looking for a while on Stack but I cannot work out a solution.

I have one method that invoked should do a GET request with Axios.

At the beginning of the method I created a new hash , so I want to store all information there and then just return that hash.

import React, {Component} from "react";
import axios from 'axios';
class Json extends Component{
  getInformation(){
    let inf = {};
     axios
      .get("http://codepen.io/jobs.json")
      .then(result=> {
        inf.description = result.data.jobs[0].description;

      })
      .catch(err=>{
        console.log("STH WRONG");
      });

      console.log(inf);
    return(inf);
  }

So what's my problem???? If I check what is inside the inf variable, it's empty. However, if I inspect with Chrome, on console I see it empty but when i check with detail the key and value are there. At the moment that i am trying to retrieve the information with inf.description is undefined.

Any idea?? Feel free to try this example, just invoke this method to check it.

EDIT

import React, {Component} from 'react';
import axios from 'axios';
class Json extends Component{
  constructor(props){
    super(props);
    this.state={title: ""};

  }
  getInformation(){
    let inf = {};

    // .get("/data/CA_data.json")
     axios
      .get("http://codepen.io/jobs.json")
      .then(result=> {
        inf.description = result.data.jobs[0].description;

      })
      .catch(err=>{
        console.log("STH WRONG");
      });

      console.log(inf);
    return(inf);
  }

  render(){
    let inf = this.getInformation();

    return(
      <h1>

      </h1>
    );
  }
}


export default Json;

Answer 1

When you make a get request with axios, you are invoking something that creates a Promise object which represents the status of the async request made. This could be a failed response, a resolved (successful) response, or pending.

The reason you are having issues obtaining the correct state are then you have logged the data immediately after you have invoked your get call and at this point, inf.description is not what you expected it to be but is most likely the Promise object with status 'pending'.

Here is a proposed solution for you:

import React, {Component} from "react";
import axios from 'axios';
class Json extends Component{
  constructor(props){
    super(props);
    this.state = { inf: {} }
  }
  componentDidMount(){
    this.getInformation();  // make the axios call in this lifecycle method
  }
  getInformation(){
    return axios
      .get("http://codepen.io/jobs.json")
      .then(result=> {
        this.setState({ inf.description: result.data.jobs[0].description });
        // this.state.inf.description is available here because
        // then() gets called once the promise has been resolved

        // the call to this.setState causes a re-render of this component
      })
      .catch(err=>{
        console.log("STH WRONG");
      });
  }
  render(){
    // this header will initially show the initial value of description
    // once the PROMISE from the getInformation call within 
    // componentDidMount resolves and calls this.setState, 
    // this component will re-render with the updated state value(s)

    <div>{ this.state.inf.description }</div>
  }
}