CODEWITHSUNDEEP
reactjsstateuse-state
Marek123
Marek123

Reputation: 1211

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?

Upvotes: 0

Views: 511

Answers (1)

Anh Tuan
Anh Tuan

Reputation: 1143

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

Upvotes: 1

Related Questions