[Select] You have provided an out-of-range value

See original GitHub issue

Hi I’m working with material-ui version 4.6.1 and I’ve a problem using a select.

The complete error is:

Material-UI: you have provided an out-of-range value Teacher for the select (name=“work”) component. Consider providing a value that matches one of the available options or ‘’. The available values are There are no valid options

The line that generates this error is the following

                <Select onChange={handleChange}
                        onBlur={handleBlur}
                        value={values[name]}
                        name={name}
                        disableUnderline={true}
                        disabled={!isEditModeActive}
                >
                    {
                        Array.isArray(options) && options.length > 0 ?
                            options.map((option: any, index: number) => (
                                <MenuItem value={option} key={`${index}`}>{option}</MenuItem>
                            )) :
                            // DEFAULT
                            <MenuItem disabled={true} value={NO_OPTIONS_LABEL}>{NO_OPTIONS_LABEL}</MenuItem>
                    }
                </Select>
```

I've written all as a normal select...can someone help me?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:39 (4 by maintainers)

github_iconTop GitHub Comments

78reactions
oliviertassinaricommented, Feb 13, 2021

This warning is meant to catch subtle issues. If the options aren’t available at the time you are rendering the select, you can use the current value as a select option, you can also decide to defer rendering the select. It will resolve the warning, and improve the UI. You will find the same warning using the Autocomplete component.

44reactions
gguilherme42commented, Apr 30, 2021

Well, apparently if you put a defaultValue like “” into <Select>, it solves the warning.

Read more comments on GitHub >

github_iconTop Results From Across the Web

MaterialUI Select set value is always out of range
I ran into the same problem (you have provided an out-of-range value) when using a number state with a default value of -1...
Read more >
[Error] You have provided an out-of-range value '' for the select ...
MUI: You have provided an out-of-range value '' for the select component. Consider providing a value that matches one of the available ......
Read more >
You have provided an out-of-range value)-Reactjs
Coding example for the question MUI Selection of an Object (MUI: You have provided an out-of-range value)-Reactjs.
Read more >
11.1.7 Out-of-Range and Overflow Handling
When an out-of-range value is assigned to an integer column, MySQL stores the value ... Out of range value for column 'i1' at...
Read more >
Multipart form handleSubmit method problem - JavaScript
Material-UI: You have provided an out-of-range value `undefined` for the select component. Consider providing a value that matches one of ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found