How to state +/- 1?

Question

JavaScript

How to manage the State value in this case? the task is simple, you need to contain a number and -/+ 1 buttons, while displaying it on the page. Both options don't work.

eng_cat_ackyes: 0,
eng_cat_ackno: 0,
...

<p>Acknowledged</p>
  <Row>
            <Button onChange={()=>this.setState({ eng_cat_ackyes: ++this.state.eng_cat_ackyes})}> + </Button>
                    <Input value={this.state.eng_cat_ackyes}
                               onChange={(event)=>this.setState({ eng_cat_ackyes: event.target.value})}
                               type="text" />
            <Button onChange={()=>this.setState({ eng_cat_ackyes: --this.state.eng_cat_ackyes})}> - </Button>
   </Row>

<p>Not Acknowledged</p>
    <Row>
              <Button onChange={()=>this.setState({ eng_cat_ackyes: this.state.eng_cat_ackyes+1})}> + </Button>
                       {this.state.eng_cat_ackno}
             <Button onChange={()=>this.setState({ eng_cat_ackyes: this.state.eng_cat_ackyes-1})}> - </Button>
   </Row>

Answer 1

you are trying to change the state, the state in React must be treated as if it is immutable, that is, you cannot set the state based on the previous state + something, because you cannot change the state itself, i.e. this.state.number++ won't work
https://jsfiddle.net/k1wukhzq/

Answer 2

The secret is out. We change onChange to onClick and everything works in the original version