Question: I am decoding a token to get the current users email address and setting to facultyEmail state and sending that to the backend to get a response. But facultyEmail is empty because componentDidMount is asynchronous ,it works outside the componentDidMount() but I don't know any way to handle the axios get request with params outside the componentDidMount i dont have event to invoke it.Thanks for the help

```
componentDidMount() {
  const token = localStorage.usertoken;
  const decoded = jwt_decode(token);
  this.setState({
    facultyEmail: decoded.email
  });

  axios
    .get("faculty/Course", {
      params: {
        facultyEmail: this.state.facultyEmail
      }
    })
    .then(res => {
      this.setState({
        class: res.data
      });
    })
    .catch(err => {
      console.log(err);
    });
  console.log("courses", this.state.facultyEmail);
}

```

Answer: 
The setState is asynchronous. You have to use setState callback or async/await 

* using callback

```
componentDidMount() {
  const token = localStorage.usertoken;
  const decoded = jwt_decode(token);
  this.setState({
    facultyEmail: decoded.email
  }, () => {
    axios
      .get("faculty/Course", {
        params: {
          facultyEmail: this.state.facultyEmail
        }
      })
      .then(res => {
        this.setState({
          class: res.data
        });
      })
      .catch(err => {
        console.log(err);
      });
    console.log("courses", this.state.facultyEmail);
  });
}

```

* using async/await

```
async componentDidMount() {
  try {
    const token = localStorage.usertoken;
    const decoded = jwt_decode(token);
    await this.setState({
      facultyEmail: decoded.email
    });

    const res = await axios.get("faculty/Course", {
      params: {
        facultyEmail: this.state.facultyEmail
      }
    })

    this.setState({
      class: res.data
    });
    console.log("courses", this.state.facultyEmail);
  } catch (err) {
    console.log(err);
  }
}

```
Why not just store `facultyEmail` in memory until the 2nd `setState`, avoiding the first one? The `axios` call is async, so you'll need to put the `console.log` in the `render` function (and you should only log it once it's actually in state).

```
componentDidMount() {
  const token = localStorage.usertoken;
  const decoded = jwt_decode(token);
  const facultyEmail = decoded.email;

  axios
    .get("faculty/Course", { params: { facultyEmail } })
    .then(res => { this.setState({ class: res.data, facultyEmail }); })
    .catch(err => { console.log(err); });
}

render() {
  if (this.state.facultyEmail) console.log("courses", this.state.facultyEmail);

  return ();
}

```