Binding this to nested functions in React

Question

How can I bind this to the React component when dealing with a nested function?

Here is a skeleton example. The reason that function2 is nested is so that you can get access to the variables defined in function1

class View extends Component{

    constructor(props){
        this.function1 = this.function1.bind(this);

        this.state = {
            a = null;
        }
    }

    componentDidMount(){
        function1();
    }

    function1(){
        console.log(this); //will show the component correctly

        var param1 = 10;

        //call a second function that's defined inside the first function
        function2();

        function function2(){
            console.log(this); //undefined

            var a = param1*2;

            this.setState({ a : a}); //won't work because this is undefined
        }
    }

    render(){
        return(
            <div>
                <p> Hello </p>
            </div>
        )
    }
}

Why do you need the nested function2? It's only accessible within function1 and you're not calling it. — Sam R.
– Sam R., Commented Feb 8, 2018 at 2:49
use arrow function for function2 is one option, const function2 = () => {...} - though, you never use function2, so there's no issue — Jaromanda X
– Jaromanda X, Commented Feb 8, 2018 at 2:49
I edited my post to call function2() from within function1(). The goal is to also have function3() and function4() that can all use the same initial variables defined in function1() — Badrush
– Badrush, Commented Feb 8, 2018 at 3:08

Nandu Kalidindi · Accepted Answer · 2018-02-08 04:07:14Z

12

Why not just use arrow functions? That would make sure this is referenced properly. I am assuming you can use ES6.

function1 = () => {
    console.log(this);

    var param1 = 10;

    const function2 = () => {
      console.log(this);

      var a = param1*2;

      this.setState({ a }); 
    }

    function2(); // inkove the function
}

OR if you only want to use ES5, then this could also work

function1() {
    console.log(this);

    var param1 = 10;

    function function2() {
      console.log(this);

      var a = param1*2;

      this.setState({ a }); 
    }

    function2.bind(this)() // to invoke the function
}

edited Feb 8, 2018 at 4:07

answered Feb 8, 2018 at 3:03

Nandu Kalidindi

6,2901 gold badge28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Badrush Over a year ago

How do you then call function2 if it's a const? Simply using function2() doesn't work.

Nandu Kalidindi Over a year ago

You can call it using function2() in ES6.

Badrush Over a year ago

that didn't work for me. Please note I updated my code and added in where I'm trying to call function2()... maybe that matters.

Nandu Kalidindi Over a year ago

But in your snippet, you are invoking the function even before declaring it? That will not work. Try invoking it after the function declaration.

Badrush Over a year ago

I thought due to hoisting it wouldn't matter.

|

Titus · Accepted Answer · 2018-02-08 02:49:50Z

3

You could keep a reference to this and use that variable inside function2.

function1(){
    var self = this;
    .....
    function function2(){
        console.log(self);
        ....
    } 
}

You can also set the context of that function using apply, bind or call. For example:

function2.call(this);

answered Feb 8, 2018 at 2:49

Titus

22.6k1 gold badge26 silver badges36 bronze badges

1 Comment

Badrush Over a year ago

Thank you. I found this useful for when I use btn.addEventListener then call function2() which then tries to call this.setState which I have now replaced with self.setState

Collectives™ on Stack Overflow

Binding this to nested functions in React

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related