'this' becomes undefined when called from onClick inside a class that extends React.Component

I have something similar to this code snippet:

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>
        )
    }
}

As the comment above specifies, when the tap() method got called from the button’s onclick, I got an error that basically told me that ‘this’ is undefined.

This error will be gone if I declare this class using React.createClass. Is this intentional? Thank you in advance!

[chentsulin]

React.createClass auto bind this for you behind the scene.

In ES6 classes, you should bind this yourself: <button onClick={this.tap.bind(this)}>

[arundhaj]

Just for info, it can also be solved as below,

class MyButton extends Component {

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