I have two buttons, One is for incrementing the quantity, and one is for decrementing.

<button type="button" className="btn btn-danger btn-sm btn-details-addminus" disabled={this.state.quantity === '1'} onClick={() => this.addMinus("minus")}><i className="ion-android-remove"></i></button>
<strong>{this.state.quantity}</strong> 
<button type="button" className="btn btn-success btn-sm btn-details-addminus" onClick={() => this.addMinus("add")}><i className="ion-android-add"></i></button>

this is addMinus:

addMinus = (name) => {

    this.setState({
        quantity: name === "add" ? parseFloat(this.state.quantity) + 1 :  parseFloat(this.state.quantity) - 1 
    })

}

it works at first. The minus button is disabled when quantity is equal to 1. but when you click the add button and try to decrement it, the button does not go back to being disabled when quantity is equal to 1 and continues to decrement to negative values.

I have two buttons, One is for incrementing the quantity, and one is for decrementing.

<button type="button" className="btn btn-danger btn-sm btn-details-addminus" disabled={this.state.quantity === '1'} onClick={() => this.addMinus("minus")}><i className="ion-android-remove"></i></button>
<strong>{this.state.quantity}</strong> 
<button type="button" className="btn btn-success btn-sm btn-details-addminus" onClick={() => this.addMinus("add")}><i className="ion-android-add"></i></button>

this is addMinus:

addMinus = (name) => {

    this.setState({
        quantity: name === "add" ? parseFloat(this.state.quantity) + 1 :  parseFloat(this.state.quantity) - 1 
    })

}

it works at first. The minus button is disabled when quantity is equal to 1. but when you click the add button and try to decrement it, the button does not go back to being disabled when quantity is equal to 1 and continues to decrement to negative values.

• javascript
• reactjs
• babeljs

4 Answers 4

Your problem is that your disabled check is expecting a string, but your setState updates it as a number (and 1 === '1' is false). You'd be better off consistently treating it as one or the other, and number is probably a better choice here:

<button type="button" disabled={this.state.quantity === 1} ...>
  <i className="ion-android-remove"></i>
</button>

And then for your update handler

addMinus = (name) => {
  this.setState(prevState => ({
    quantity: name === "add" ? prevState.quantity + 1 :  prevState.quantity - 1 
  })
}

You should check if your state already 1 and action is minus then do nothing (return null), in other case do increment/decrement state

addMinus = (name) => {
  if (this.state.quantity === '1' && name==="minus") {
   return null;
  }
  this.setState({ 
    quantity: name === "add" 
     ? parseFloat(this.state.quantity) + 1 
     : parseFloat(this.state.quantity) - 1 
   })
  }

Perhaps the issue is here disabled={this.state.quantity===“1”}. Try without quotes

Other way of doing the same

You can have initial state quantity value as zero and so you no need to parse the value every time the button is clicked.

addMinus = (name) => {
     let quantity = this.state.quantity;
     if(name == “add”){
         this.setState({
             quantity: quantity+1
         });
      }else{
           this.setState({
             quantity: quantity-1
           });
      }
 }

I would do the logic outside of the setState. It could be related to the fact that setState causes the ponent to remount/update each time. So something like this:

addMinus = (name) => {
const stateQuanity = name === "add" ? parseFloat(this.state.quantity) + 1 :  parseFloat(this.state.quantity) - 1 
    this.setState({
        quantity: stateQuanity
    })

}