"this" is undefined inside an anonymous function returned by another function React

user_12103271 0
Viewed 201

I have started learning React and have below component:

import React, { Component } from 'react';
class Test extends Component{
    handler(){
        console.log(this);
        return function(){
            console.log(this);
        }
    }
    render(){
       {this.handler()()}
       return null;
    }
}
export default Test;

When this component is mounted in browser, the console prints thatthis inside the function returned by handler is undefined.

I don't understand why it is undefined if the component has already mounted. Can you people help me to find the reason for this and a possible correction.

thank You!

reactjs
2 Answers

this inside the nested function will be determined based on how it is called. Since you are not calling it with any object, this inside the nested function is undefined.

If you want this to be equal to value of this in the outer function, use arrow function.

handler(){
    console.log(this);
    return () => {
        console.log(this);
    }
}

or you could use call function

{this.handler().call(this)}

for more info on call function, see Function.prototype.call().

You can also use Function.prototype.bind() or Function.prototype.apply(). There are slight differences between these functions which you can read about on MDN docs.

user_60943480

this is defined in a function by how the function is called. The handler function is called on this i.e instance of class and hence this inside handler function will print you the class instance. However the returned function is not called on the class instance but independently and hence this is undefined for it

You can define the returned function to be an arrow function and it will refer to the correct this that you want

import React, { Component } from 'react';
class Test extends Component{
    handler(){
        console.log(this);
        return () => {
            console.log(this);
        }
    }
    render(){
       {this.handler()()}
       return null;
    }
}
export default Test;
user_59281860
Related