I have this file and through this file I code the Dialog, and I create a product because the project is an ECommerce project and I have in this Dialog upload an image, and I got this error and I didn't know how to solve it:

Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components

This file contains the Dialog and the entire interface for creating a product

import * as React from "react";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import { makeStyles } from "@mui/styles";
import Image from "next/image";
import axios from "axios";

const useStyles = makeStyles({
  button: {},
  buttonUpload: {
    backgroundColor: "#ffc400 !important",
    color: "white  !important",
  },
  diaButton: {},
});

export default function FormDialog() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);
  const newLocal = false;
  const [selectedFile, setSelectedFile] = React.useState(newLocal);
  const [title, setTitle] = React.useState("");
  const [price, setPrice] = React.useState(null);
  const [description, setDescription] = React.useState("");
  const [category, setCategory] = React.useState("");

  function fileSelectedHandler(event) {
    console.log(event.target.files[0]);
    setSelectedFile(event.target.files[0]);
  }

  const fileUploadHandler = async () => {
    // console.log("title: ", title);
    // console.log("price: ", price);
    // console.log("description: ", description);
    // console.log("image: ", image);
    // console.log("category: ", category);
    console.log(selectedFile);
    const fd = new FormData();
    fd.append("image", selectedFile);
    // I think what you missing is the header to inform the axios as multi part request
    fd.append("data", JSON.stringify({ title, price, description, category }));
    await axios.post("https://fakestoreapi.com/products", fd, {
      headers: {
        "Content-type": "multipart/form-data",
      },
    });

    // console.log(response);
  };
  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const onSendMsg = () => {
    handleClose();
    fileUploadHandler();
  };

  return (
    <div>
      <Button
        style={{
          padding: 14,
          backgroundColor: "#ffc400 !important",
          color: "white",
        }}
        onClick={handleClickOpen}
      >
        Add New Product
      </Button>

      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Create Product</DialogTitle>

        <DialogContent>
          <DialogContentText style={{ marginBottom: 14 }}>
            Please fill in the fields to create a product.
          </DialogContentText>

          <input
            type="file"
            id="select-image"
            style={{ display: "none" }}
            onChange={fileSelectedHandler}
          />
          <label htmlFor="select-image">
            <Button variant="contained" color="primary" component="span">
              Upload Image
            </Button>
          </label>
          <TextField
            autoFocus
            margin="dense"
            id="title"
            label="Title"
            type="text"
            fullWidth
            variant="standard"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
          <TextField
            autoFocus
            margin="dense"
            id="price"
            label="Price"
            type="number"
            fullWidth
            variant="standard"
            value={price}
            onChange={(e) => setPrice(e.target.value)}
          />
          <TextField
            autoFocus
            margin="dense"
            id="description"
            label="Description"
            type="text"
            fullWidth
            variant="standard"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />
          <TextField
            autoFocus
            margin="dense"
            id="category"
            label="Category"
            type="text"
            fullWidth
            variant="standard"
            value={category}
            onChange={(e) => setCategory(e.target.value)}
          />
        </DialogContent>

        <DialogActions>
          <Button
            // className={classes.diaButton}
            // onClick={handleClose}
            // type="submit"
            style={{
              textTransform: "none !important",
              color: "#ffc400 !important",
              padding: 14,
              fontWeight: 500,
            }}
            onClick={fileUploadHandler}
          >
            Create
          </Button>
          <Button
            style={{
              textTransform: "none !important",
              color: "#ffc400 !important",
              padding: 14,
              fontWeight: 500,
            }}
            onClick={handleClose}
          >
            Cancel
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

CodePudding user response：

The value={price} is the part that causes the warning. It's because your initial price state is null.

Changing price initial state to an empty string should fix the issue.

const [price, setPrice] = React.useState('');

CodePudding user response：

You are setting price initial value as null and using that as value in an input is the reason for the warning.

Use either of the following code:

const [price, setPrice] = React.useState(); //undefined price

OR

const [price, setPrice] = React.useState(""); //empty string as price