[Select] You have provided an out-of-range value
See original GitHub issueHi 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
Teacherfor the select (name=“work”) component. Consider providing a value that matches one of the available options or ‘’. The available values areThere 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:
- Created 4 years ago
- Reactions:3
- Comments:39 (4 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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
Autocompletecomponent.Well, apparently if you put a defaultValue like “” into
<Select>,it solves the warning.