counter.js

class Clicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    }
    this.onMinusClick = this.onMinusClick.bind(this);
    this.onResetClick = this.onResetClick.bind(this);
    this.onPlusClick = this.onPlusClick.bind(this);
    this.onMinusTenClick = this.onMinusTenClick.bind(this);
    this.onAddTenClick = this.onAddTenClick.bind(this);
  }
  
  onMinusClick() {
    this.setState((prevState) => ({ counter: prevState.counter - 1 }));
  }
  
  onMinusTenClick() {
    this.setState((prevState) => ({ counter: prevState.counter - 10 }));
  }
  
  onResetClick() {
    this.setState({
      counter: 0,
    })
  }
  
  onPlusClick() {
    this.setState((prevState) => ({ counter: prevState.counter + 1 }));
  }  
  
  onAddTenClick() {
    this.setState((prevState) => ({ counter: prevState.counter + 10 }));
  }
  
  
  render() {
    return (
      <div>
        <h3>Counter</h3>
        <div>
          <h4>{this.state.counter}</h4>
        </div>
        <button
          onClick={this.onMinusClick}
        >
          -
        </button>
        <button
          onClick={this.onMinusTenClick}
        >
          Subtract 10
        </button>
        <button
          onClick={this.onResetClick}
        >
          reset
        </button>
        <button
          onClick={this.onAddTenClick}
        >
          Add 10
        </button>
        <button
          onClick={this.onPlusClick}
        >
          +
        </button>
      </div>
    );
  }
}


ReactDOM.render( <Clicker />, document.getElementById('root'))