- 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