I want to set a default value of my input field but it doesn't provide right one without reloading and shows previous default value in that field

Question

I am trying to show minOrderQuantity for the selected product but it gives me previously selected minOrderQuantity data in the default value of input field.

const { data: product, isLoading, refetch } = useQuery('camera', () => fetch(`http://localhost:5000/camera/${id}`)
    .then(res => res.json()))
  const [quantity, setQuantity] = useState(product?.minOrderQuantity || 0);
  const [error, setError] = useState(false);
  if (isLoading) {
    return <Loading />
  }
  refetch()
  const { name, image, description, minOrderQuantity, available, price } = product;
  let quantityError;
  const handleQuantityInput = (e) => {

    setQuantity(e.target.value);
    if (quantity > available || quantity < minOrderQuantity) {
      setError(true);
      quantityError = <p>Invalid Quantity given</p>
    } else {
      setError(false);
    }
  }

<form onSubmit={handleSubmitForm}>
            <div className="form-control w-full max-w-xs">
              <input type="text" placeholder="Your Name" name='username' className="input mb-5 input-bordered w-full max-w-xs" />
              <input type="text" value={user?.email} className="input mb-5 text-gray-500 input-bordered w-full max-w-xs" />
              <label className="label">
                <span className="label-text font-semibold">We don't take less than {minOrderQuantity} order for this item</span>
              </label>
              <input onChange={(event) => handleQuantityInput(event)}
                defaultValue={minOrderQuantity} type="number" name='quantity' className="input input-bordered w-full max-w-xs" />
              {error &&
                <label className="label">
                  <span className="label-text-alt text-red-600">{quantityError}</span>
                </label>}
              <p className='text-2xl font-semibold my-5'>Total Price: ${quantity * price}</p>
              <input type="text" placeholder="Your Address" className="input mb-5 input-bordered w-full max-w-xs" />
              <input className="btn btn-primary"
                disabled={quantity < minOrderQuantity || quantity > available}
                type='submit' value='Place Order' />
            </div>
          </form>

It gives me the following warning which I didn't understand:

Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

score 0 · Answer 1 · answered May 24 '22 at 00:55

Firstly, you are providing only value prop without onChange prop to these input fields. It causes of the warning you have been seeing. If you don't need to get the changing values of input fields, you can change value prop to defaultValue prop.

<input type="text" value={user?.email} className="input mb-5 text-gray-500 input-bordered w-full max-w-xs" />
....
<input className="btn btn-primary" disabled={quantity < minOrderQuantity || quantity > available} type='submit' value='Place Order' />

Then, as for defaultValue update, the defaultValue is set only once at initial load of a component.

I believe that React - change input defaultValue by passing props will resolve your trouble.

I want to set a default value of my input field but it doesn't provide right one without reloading and shows previous default value in that field

1 Answers1