axios.then(res => { console.log(this) }) prints undefined

Question

I am trying to set state after axios calls. Inside then clause I have been trying to set state with this.setState({...}) but this is undefined here.

Why console.log(this) is printing 'undefined' in console?

  clickButton() {
    let data = {
      username : document.querySelector('#email').value,
      password : document.querySelector('#password').value
    };

    axios.post('http://127.0.0.1:8000/api/login_check', data, {
      headers: {
        'Content-Type' : 'application/json',
      }
    })
    .then(res => {
      console.log(this)
    })
  }

Possible duplicate of [Why "this" is undefined inside a fat arrow function definition?](https://stackoverflow.com/questions/38589227/why-this-is-undefined-inside-a-fat-arrow-function-definition) — grooveplex, May 19 '19 at 22:10

score 1 · Accepted Answer · answered May 19 '19 at 22:12

1

The most obvious reason would be that since your clickButton function is not an arrow function you must have forgotten to bind your function in the constructor. Alternatively, switch clickButton to an arrow function and you should be fine.

answered May 19 '19 at 22:12

KT-mongo

2,044
4
18
28

score 0 · Answer 2 · answered May 19 '19 at 22:27

0

Try the following code to bind this to the click button function

clickButton = () => { .... }

answered May 19 '19 at 22:27

Simon Thiel

2,888
6
24
46

axios.then(res => { console.log(this) }) prints undefined

2 Answers2