Stack Exchange
multiple Increment/Decrement buttons with useState fails
I use decrement/increment buttons on two/multiple input fields but as soon as I trigger a second input field button set, I get the following error-messages/warnings:
Warning: A component is changing a controlled input of type undefined to be uncontrolled.
and the second field value goes from number to NaN.
const [formField, setFormField] = useState({ drivingTime: 5, shorePower: 15 });

const handleOnChange = e => {
    const { name, value } = e.target;
    setFormField({ [name]: parseInt(value, 10) });
};

const IncrementItem = (name) => {
    setFormField(prev => ({ [name]: parseInt(prev[name], 10) + 1 }));
}

const DecreaseItem = (name) => {
    setFormField(prev => ({ [name]: parseInt(prev[name], 10) - 1 }));
}  

and the inputs as follows:
 <input
  name="drivingTime"
  value={formField.drivingTime}
  onChange={handleOnChange}
  ref={register({ required: true })}
/>

<button className="btnIncrease" onClick={() => IncrementItem('drivingTime')}>+</button>
<button className="btnDecrease" disabled={formField.drivingTime < 1} onClick={() => DecreaseItem('drivingTime')}>-</button>  

and
  <input
   name="shorePower"
   value={formField.shorePower}
   onChange={handleOnChange}
   ref={register({ required: true })}
  />

  <button className="btnIncrease" onClick={() => IncrementItem('shorePower')}>+</button>
  <button className="btnDecrease" disabled={formField.shorePower< 1} onClick={() => DecreaseItem('shorePower')}>-</button>  

What exactly do I miss here?

const IncrementItem = (name) => {
    setFormField(prev => ({ ...formField, [name]: parseInt(prev[name], 10) + 1 }));
}

const DecreaseItem = (name) => {
    setFormField(prev => ({ ... formField, [name]: parseInt(prev[name], 10) - 1 }));
}  

i think you have overwritten your state, change IncrementItem and DecreaseItem to this
.Sr for my bad english

Perfect. Thank you. This was it! (and EN is very good!) Thank you!

thank you :D
this error can be cause by getting undefined input 's value . next time take a look at that, or smt like value={formField?.drivingTime || ''} @Marek123
