How to implement increment and decrement button on an antd input in react

336 views Asked by At
  • Hey,am implementing a shopping cart functionality
  • I want to increment or decrement the value in an input field, which works but what confuses me is that when a click on either button (+ or -) all items in the shopping cart are affected.
  • anyone with any idea will be appreciated

Bellow is my code

const [value, setValue] = useState(1);

const increment = () => {
  if (value !== 10) {
    setValue(value + 1);
  }
};
const decrement = () => {
  if (value !== 1) {
    setValue(value - 1);
  }
};


 <Button
   style={{ backgroundColor: "#EF4444", borderColor: "#EF4444" }}
   onClick={decrement}
 >
   <MinusOutlined style={{ fontSize: "15px", color: "#fff" }} />
 </Button>
 <InputNumber
   status
   readOnly
   onChange={setValue}
   min={1}
   max={10}
   value={value}
   style={{ maxWidth: "50px" }}
 />
 <Button
   style={{ backgroundColor: "#22C55E", borderBlockColor: "#22C55E" }}
   onClick={increment}
  >
   <PlusOutlined style={{ color: "#fff", fontSize: "15px" }} />
 </Button>
  • N.B , I Have added only relevant code and am using antd InputNumber
0

There are 0 answers