I have an edit page with a material UI dropdown list of departments (values = id, name), which is being populated by and API. When I select a record from my table, the record has a value of departmentName that I am using as my current value. The record's current value displays in the dropdown when the page loads, and if you open the dropdown to select a new value, the option matching the current value is highlighted. Obviously the current value is on the list of options, but I am still getting this warning:

Material-UI: You have provided an out-of-range value (the current value) for the select (name="departmentName") ponent. Consider providing a value that matches one of the available options or ''. The available values are ``.

How can I remedy this issue and get rid of this warning? Can someone please show me what to do to fix this issue, I have tried everything I have seen online and nothing has taken care of the warning.

Dropdown Component in form

<Controls.Dropdown
  onChange={handleInputChange}
  name='departmentName'
  prompt='Select A Department...'
  url='/api/maintain/departments/'
  value={values.departmentName}
/>

Dropdown

export default function Dropdown(props) {
   const { error = null, label, onChange, prompt, value, url, ...other } = props;
   const [options, setOptions] = React.useState([]);

   React.useEffect(() => {
       const fetchData = async () => {
       const res = await axios.get(dropdownUrl);
       setOptions( res.data );
   };
   fetchData();
   }, [setOptions]); 

   return(
     <FormControl>
       <Select
         defaultValue=''
         onChange={onChange}
         value={value === undefined || null ? '' : value}
         {...other}
         {...(error && {error: true, helperText: error})}
     >
       <MenuItem value=''>{prompt}</MenuItem>
         {options && options.map((option, id) => (
           <MenuItem
           key={option.id}
           value={option.name}
         >
         {option.name}
       </MenuItem>
                ))}
            </Select>
     </FormControl>
        );
    }

I have an edit page with a material UI dropdown list of departments (values = id, name), which is being populated by and API. When I select a record from my table, the record has a value of departmentName that I am using as my current value. The record's current value displays in the dropdown when the page loads, and if you open the dropdown to select a new value, the option matching the current value is highlighted. Obviously the current value is on the list of options, but I am still getting this warning:

Material-UI: You have provided an out-of-range value (the current value) for the select (name="departmentName") ponent. Consider providing a value that matches one of the available options or ''. The available values are ``.

How can I remedy this issue and get rid of this warning? Can someone please show me what to do to fix this issue, I have tried everything I have seen online and nothing has taken care of the warning.

Dropdown Component in form

<Controls.Dropdown
  onChange={handleInputChange}
  name='departmentName'
  prompt='Select A Department...'
  url='/api/maintain/departments/'
  value={values.departmentName}
/>

Dropdown

export default function Dropdown(props) {
   const { error = null, label, onChange, prompt, value, url, ...other } = props;
   const [options, setOptions] = React.useState([]);

   React.useEffect(() => {
       const fetchData = async () => {
       const res = await axios.get(dropdownUrl);
       setOptions( res.data );
   };
   fetchData();
   }, [setOptions]); 

   return(
     <FormControl>
       <Select
         defaultValue=''
         onChange={onChange}
         value={value === undefined || null ? '' : value}
         {...other}
         {...(error && {error: true, helperText: error})}
     >
       <MenuItem value=''>{prompt}</MenuItem>
         {options && options.map((option, id) => (
           <MenuItem
           key={option.id}
           value={option.name}
         >
         {option.name}
       </MenuItem>
                ))}
            </Select>
     </FormControl>
        );
    }

• javascript
• reactjs
• material-ui

1 Answer 1

Because you're passing a value to the <Select> before the <MenuItem> options have been populated. Initially there are no options:

const [options, setOptions] = React.useState([]);

Only the default one:

<MenuItem value=''>{prompt}</MenuItem>

So if value is anything other than null or undefined (that check may have a bug too by the way, but we'll correct it as well) or '' then it's a value which isn't in the available options.

During the time in which options is being populated by the AJAX operation, keep the selected value as '' by default. For example:

value={
  (value === undefined ||
  value === null ||
  options.length === 0) ? '' : value}