React demo 02

class PlusButton extends React.Component{
    handleOnClick = () => {
        this.props.action(this.props.step);
  }
    render(){
    return (
        <button onClick={this.handleOnClick}>+ {this.props.step}</button>
    );
  }
}

class MinusButton extends React.Component{
    render(){
    return (
        <button onClick={this.props.action}>-</button>
    );
  }
}

class App extends React.Component{
    state = {counter: 0};

  increase = (step) => {
    this.setState((prevState) => {
        return {
        counter: prevState.counter + step
      }
    })
  }

  decrease = () => {
    this.setState((prevState) => {
        return {
        counter: prevState.counter - 1
      }
    })
  }

    render(){
    return (
      <div>
        <PlusButton step={5}
                action={this.increase} />
        <PlusButton step={1}
                action={this.increase} />
        <MinusButton action={this.decrease} />
        <div>{this.state.counter}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);