"this" of a function in React Component- Please read lines at the end of code

Question

class MyButton extends Component {

    state = { tapped: false }
    tap() {
          this.setState({ tapped: true });  // --> 'this' here is undefined 
    }
    render() {
        return (
             <button onClick={ this.tap }>TAP ME</button>
        )
    }
}

I know with ES6 class React doesn't auto bind this to component's instance, hence inside tap "this" is undefined. What I don't understand here is why tap function is present in the component's instance and is not throwing an error undefined of tap doesn't exist? How tap is part of component instance?

It clearly gives an undefined error for me: https://codesandbox.io/s/9oyll1j02r — paradite, Jan 09 '18 at 16:11
I know inside the function it will be undefined. I want to know why this.tap is Component.tap not undefined.tap. The correct function in the component instance is being called with this.tap — Akash Verma, Jan 09 '18 at 16:14
@AkashVerma Are you asking "Why `this` is not undefined at `onClick={ this.tap }` ?? — Prakash Sharma, Jan 09 '18 at 16:18

score -2 · Answer 1 · answered Jan 09 '18 at 16:15

-2

class MyButton extends Component {

    state = { tapped: false }

    tap = () => {
          this.setState({ tapped: true }); 
    }

    render() {
        return (
             <button onClick={ this.tap }>TAP ME</button>
        )
    }
}

answered Jan 09 '18 at 16:15

Daniel Khoroshko

2,623
15
26

Unrelated, but be cautious about using arrow fns in components if there will be a "lot" of them since they're duplicated across instances. That's one reason why people bind them in the ctor. – Dave Newton Jan 09 '18 at 16:32
Yes you are right about that. I prefer SFCs anyway – Daniel Khoroshko Jan 09 '18 at 16:51

"this" of a function in React Component- Please read lines at the end of code

1 Answers1