Value of keyword this

Question

Have a look at the following code:

class App extends React.Component {


  go(){
    console.log("Hello",this);
  }
  render() {
    console.log("Hey",this);

    return ( 
      <button onClick={this.go}>Add profile</button>
    );
  } 
}

Why the value of this inside go is undefined? this inside render is an App instance and since we call this.go the value of this inside method go should be equal to the same App instance.

score 2 · Answer 1 · answered Jul 10 '19 at 16:42

You need to bind go or use arrow function:

export default class App extends React.Component {
  go = () => {
    console.log('Hello', this);
  };
  render() {
    console.log('Hey', this);

    return <button onClick={this.go}>Add profile</button>;
  }
}

Value of keyword this

1 Answers1