React - You have provided an out-of-range value `undefined` for the select component

Question

I'm creating a material-UI dialogue form that posts data to my API. One of the fields in my backend database is binary and takes in only two possible options. How can I reflect that in my dialogue code below?

Here is my Fulltrace Back error:

Material-UI: You have provided an out-of-range value undefined for the select (name="category") component. Consider providing a value that matches one of the available options or ''. The available values are personal, social.

The possible options for this specific field are either personal or social.

I tried doing this, letting my dialogue push the correct responses:

<MenuItem value={'personal'}> personal </MenuItem>
<MenuItem value={'social'}> social </MenuItem>

But that does not work and I understand why. Just not sure how to solve the error now as I'm not too savvy with React/JS in general.

export default function CreateBucket() {
    const [open, setOpen] = React.useState(false);

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

    const history = useHistory();
    const initialFormData = Object.freeze({
        name: '',
        category: '',
        about: '',
    });

    const [formData, updateFormData] = useState(initialFormData);

    const handleChange = (e) => {
        updateFormData({
            ...formData,
            // Trimming any whitespace
            [e.target.name]: e.target.value.trim(),
        });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(formData);

        axiosInstance
            .post(`create/bucket`, {
                name: formData.name,
                category: formData.category,
                about: formData.about,
            })
            .then((res) => {
                history.push('/');
                console.log(res);
                console.log(res.data);
            });
    };

    const classes = useStyles();

    return(
        <Fragment>
        <Fab color="primary" aria-label="add"  onClick={handleClickOpen} variant="extended">
        <AddIcon className={classes.extendedIcon}/>
        Create Bucket
        </Fab>
        <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Create your Bucket</DialogTitle>
        <DialogContent>
            <DialogContentText>
            Get started! Make your bucket by telling us a little bit more.
            </DialogContentText>
                <form>            
                <FormControl>
                <InputLabel> What type of Bucket </InputLabel>
                <Select
                id="category"
                label="Bucket Type"
                name="category"
                fullWidth
                required
                variant="filled"
                onChange={handleChange}
                margin="normal"
                className={classes.formControl}
                >
                <MenuItem value={'personal'}> personal </MenuItem>
                <MenuItem value={'social'}> social </MenuItem>
                </Select>
                </FormControl>
                </form>
            </DialogContent>
            <DialogActions>
            <Button 
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
            onClick={handleSubmit}
            >
            Create Bucket
            </Button>
        </DialogActions>
        </Dialog>
    </Fragment>  
    );
}

How can I implement changes to solve my traceback error?

Answer 1

Make sure you provide value prop to <Select> component, put value="" in case you don't want any of the options to be selected by default or value="personal" in case you want personal to be selected by default.

Her is mine with value={formData.category} it takes the value selected from state.

export default function CreateBucket() {
  const [open, setOpen] = React.useState(false);

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

  const history = useHistory();
  const initialFormData = Object.freeze({
    name: '',
    category: '',
    about: '',
  });

  const [formData, updateFormData] = useState(initialFormData);

  const handleChange = (e) => {
    updateFormData({
      ...formData,
      // Trimming any whitespace
      [e.target.name]: e.target.value.trim(),
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);

    axiosInstance
      .post(`create/bucket`, {
        name: formData.name,
        category: formData.category,
        about: formData.about,
      })
      .then((res) => {
        history.push('/');
        console.log(res);
        console.log(res.data);
      });
  };

  const classes = useStyles();

  return(
    <Fragment>
      <Fab color="primary" aria-label="add"  onClick={handleClickOpen} variant="extended">
        <AddIcon className={classes.extendedIcon}/>
        Create Bucket
      </Fab>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Create your Bucket</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Get started! Make your bucket by telling us a little bit more.
          </DialogContentText>
          <form>            
            <FormControl>
              <InputLabel> What type of Bucket </InputLabel>
              <Select
                id="category"
                label="Bucket Type"
                name="category"
                fullWidth
                required
                variant="filled"
                onChange={handleChange}
                margin="normal"
                value={formData.category}
                className={classes.formControl}
              >
                <MenuItem value={'personal'}> personal </MenuItem>
                <MenuItem value={'social'}> social </MenuItem>
              </Select>
            </FormControl>
          </form>
        </DialogContent>
        <DialogActions>
          <Button 
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
            onClick={handleSubmit}
          >
            Create Bucket
          </Button>
        </DialogActions>
      </Dialog>
    </Fragment>  
  );
}