class App1 extends React.Component {
  constructor(props) {
    super(props);
    // If we comment out the following line we will get run time error when changeColor get called.
    this.changeColor = this.changeColor.bind(this);
  }

  changeColor(e) {
    e.currentTarget.style.backgroundColor = "#00FF00";
    console.log(this.props);
  }

  render() {
    return (
      <div>
        <p> This is the default way, we need bind `this` to function in constructor </p>
        <button onClick={this.changeColor}> button 1</button>
        <span>         </span>
        <button onClick={this.changeColor}> button 2</button>
      </div>
    );
  }
}

class App2 extends React.Component {
  changeColor = e => {
    e.currentTarget.style.backgroundColor = "#00FF00";
    console.log(this.props);
  };
  render() {
    return (
      <div>
        <p> When we define the function as a class field, we don't need to bind `this` </p>
        <button onClick={this.changeColor}> button 1</button>
        <span>         </span>
        <button onClick={this.changeColor}> button 2</button>
      </div>
    );
  }
}

class App3 extends React.Component {
  changeColor(e, colorHex) {
    e.currentTarget.style.backgroundColor = colorHex;
    console.log(this.props);
  }
  render() {
    return (
      <div>
        <p> When we use arrow function, we don't need to bind `this` and can pass parameters</p>
        <button onClick={e => this.changeColor(e, "#ff0000")}> button 1</button>
        <span>         </span>
        <button onClick={e => this.changeColor(e, "#0000ff")}> button 2</button>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <App1 />
    <App2 />
    <App3 />
  </div>,
  document.getElementById("root")
);