React / Javascript Variables

Question

I'm attempting to pass an Object from one Class to another which are in separate files. The overall goal is to consolidate my API calls into a single .js file for reference throughout the app.

The issue I'm having here is I'm unable to access the variables within the object within the .js file that calls the class.

Scenario: I make my API calls in APICall.js and then attempt to pass the response data back to Page.js. I'm able to see my object in Page.js; however, I can't seem to access any of the variables to update my state.

Note: I'm new to ReactJS (and Javascript) with a solid Python background. Obviously these are two completely different beasts here.

Appreciate any assistance anyone can provide!

Console Logs Issues

1. :20 Object appears empty but shows values when extending.
2. :21 is a blank line but should be logging the first_name
3. :30 is a blank Object all together

--

TESTING !@#
UpperNavigation.js:20 {first_name: "", last_name: "", email: "", company: ""}
    company: "Testing 123"
    email: "john@somewebsite.com"
    first_name: "John"
    last_name: "Doe"
    __proto__: Object

UpperNavigation.js:21 

UpperNavigation.js:30 {first_name: "", last_name: "", email: "", company: ""}
    company: ""
    email: ""
    first_name: ""
    last_name: ""
    __proto__: Object

Page.js

state = {
    first_name: '',
    last_name: '',
    email: '',
    company: ''
}

componentWillMount() {
    // this.getUserProfile.bind(this)
    var userData = new vAPI().getUserProfile()
    console.log("TESTING !@#");
    console.log(userData)
    console.log(userData.first_name);

    this.setState({
        first_name: userData.first_name,
        last_name: userData.last_name,
        email: userData.email,
        company: userData.company
    });

    console.log(this.state);
}

APICall.js

import axios from 'axios';

export default class vAPI {
    constructor() {
        this.state = {
            first_name: "",
            last_name: "",
            email: "",
            company: ""
        }
    }

    getUserProfile(){
        const URL = "https://somewebsite.com/api/user_profile/"
        const USER_TOKEN = localStorage.getItem('access_token')
        const AuthStr = 'JWT '.concat(USER_TOKEN);

        axios.get(URL, { headers: { Authorization: AuthStr } }).then(response => {
            this.state.first_name = response.data.first_name
            this.state.last_name = response.data.last_name
            this.state.email = response.data.email
            this.state.company = response.data.company            

            }).catch((error) => {
                console.log('error 3 ' + error);
            });

        return (this.state);
    };
}

Answer 1

In getUserProfile() you are returning this.state before your axios get request is complete. When you call getUserProfile() from Page.js you are trying to access the data before it is set from your get request.

---

You should be returning the promise in getUserProfile() then using async/await or .then() when you call it in componentWillMount() before setting the data

getUserProfile(){
  const URL = "https://somewebsite.com/api/user_profile/"
  const USER_TOKEN = localStorage.getItem('access_token')
  const AuthStr = 'JWT '.concat(USER_TOKEN);

  return axios.get(URL, { headers: { Authorization: AuthStr } })
};

async/await

async componentWillMount() {
  const userDataRes = await (new vAPI().getUserProfile());
  const userData = userDataRes.data;

  this.setState({
    first_name: userData.first_name,
    last_name: userData.last_name,
    email: userData.email,
    company: userData.company,
  });

  console.log('state', this.state);
}

promise

componentWillMount() {
  new vAPI().getUserProfile().then((userDataRes) => {
    const userData = userDataRes.data;

    this.setState({
      first_name: userData.first_name,
      last_name: userData.last_name,
      email: userData.email,
      company: userData.company,
    });

    console.log('state', this.state);
  });
}