Binding of 'this'

1st way - bind 'this' to the function 'constructor'

class Checkbox extends React.Component {
  constructor() {
    super();

    this.state = {
      checked: false
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    this.setState({ checked: !this.state.checked });
  }

  render() {
    return(
      <button className="icon checkbox" onClick={this.handleClick}>
        <i className="material-icons">
          {this.state.checked ? 'check_box' : 'check_box_outline_blank'}
        </i>
      </button>
    );
  }
};

2nd way - bind 'this' to the method call

class Checkbox extends React.Component {
  constructor() {
    super();

    this.state = {
      checked: false
    };
  }

  handleClick(e) {
    this.setState({ checked: !this.state.checked });
  }

  render() {
    return(
      <button className="icon checkbox" onClick={this.handleClick.bind(this)}>
        <i className="material-icons">
          {this.state.checked ? 'check_box' : 'check_box_outline_blank'}
        </i>
      </button>
    );
  }
};

3rd way - arrow function

class Checkbox extends React.Component {
  constructor() {
    super();

    this.state = {
      checked: false
    };
  }

  handleClick = (e) => {
     this.setState({ checked: !this.state.checked });
  }

  render() {
    return(
      <button className="icon checkbox" onClick={this.handleClick}>
        <i className="material-icons">
          {this.state.checked ? 'check_box' : 'check_box_outline_blank'}
        </i>
      </button>
    );
  }
};