How Can I Avoid This Warning ' A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from...'?

Question

    const AddItem = () => {
  const [user] = useAuthState(auth);
  const navigate = useNavigate();

  const handleAddCar = (e) => {
    e.preventDefault();
    const carObj = {
      name: e.target.name.value,
      supplier: e.target.supplier.value,
      email: user.email,
      price: parseInt(e.target.price.value),
      quantity: parseInt(e.target.quantity.value),
      description: e.target.description.value,
      img: e.target.image.value,
      sold: parseInt(e.target.sold.value),
    };
    axios
      .post("http://localhost:5000/car", carObj)
      .then((response) => {
        toast("Successfully Added");
      });
    e.target.reset();
  };
  return (
    <div>
      <Container>
        <Row>
          <div className="col-md-6 mx-auto">
            <h2 className="my-5">Add A Car</h2>
            <Form onSubmit={handleAddCar}>
              <Form.Group className="mb-3" controlId="formBasicModel">
                <Form.Label>Model</Form.Label>
                <Form.Control type="text" name="name" required />
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicSupplier">
                <Form.Label>Supplier</Form.Label>
                <Form.Control type="text" name="supplier" required />
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicEmail">
                <Form.Label>Email</Form.Label>
                <Form.Control
                  type="email"
                  value={user.email}
                  readOnly
                  disabled
                />
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicPrice">
                <Form.Label>Price</Form.Label>
                <Form.Control type="number" name="price" required />
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicQuantity">
                <Form.Label>Quantity</Form.Label>
                <Form.Control type="number" name="quantity" required />
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicDescription">
                <Form.Label>Description</Form.Label>
                <br />
                <textarea
                  className="w-100"
                  name="description"
                  required
                ></textarea>
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicImage">
                <Form.Label>Image</Form.Label>
                <Form.Control type="text" name="image" required />
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicImage">
                <Form.Label>Sold</Form.Label>
                <Form.Control type="number" name="sold" required />
              </Form.Group>

              <Button variant="primary" type="submit" className="w-100 fw-bold">
                Add Car
              </Button>
            </Form>
          </div>
        </Row>
      </Container>
    </div>
  );
};

I am trying to add an item in mongodb database by a form where I set some default value and required all input field. It is working properly but getting a warning on console "A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen."

Answer 1

Your problem is here:

<Form.Control
   type="email"
  value={user.email}
  readOnly
  disabled
/>

You can see you're setting the value of this component to user.email, making it a controlled input (where the value is passed in, and controlled from a parent component usually via a state).

an uncontrolled component is - basically - one where the value is not passed in, and the component itself deals with the value.

I'd guess that your user object (or the email parameter at least) is undefined to begin with, and then populates via an API call of some kind.

you either need to always have user.email parameter available when this input is rendered (eg. wrap the input in a check so it only renders when user.email !== undefined or add in a placeholder email param when the user object is first initialised), or less ideally supply a value for when the value is undefined. (eg. value={user.email ?? '-'} )