Dynamically populate a Material UI Select Component, depending on other states - reactjs

Question

I'm currently stuck with the following scenario.
I have two select components from Material-UI.
Select component one contains car brands, component two contains car models.
Desired behaviour
The car brands get fetched from the server and the list for Select "brands" gets populated.
Select "models" is still disabled, until a brand is selected.
Brand gets selected, client is fetching all models from this brand from server
Options for the Select 'models' get populated and the component becomes enabled
I store the fetched brand in a redux state.
I store the fetched model in a redux state.
I store the selected brand and model in a redux state.
{
brand:{
brands:{
brands:[
{
_id: 1,
name: "vw"
},
{
_id: 2,
name: "bmw"
}
]
}
},
data:{
form: {
brandId: '',
modelId: '',
errors: {}
},
models:{}
}
}
redux-states
Current behaviour
Car makers get fetched from server and the options for Select component "makers" gets populated as expected.
Select "models" is still disabled, as it should be.
I click on the "brands" select and see the available brands, as expected.
I select a brand and the following happens
"brands" select doesn't show any value and if i click on it again, the list is empty
the following warning appears
SelectInput.js:342 Material-UI: You have provided an out-of-range value
Project setup
let onChange = event => {
dispatch({
type: 'UPDATE_USER_INVITE_FORM',
field: event.target.id,
payload: event.target.value
});
};
...
return(
...
<FormControl
variant="outlined"
className={classes.formControl}
error={form.errors.brandId? true : false}
disabled={brandRenderList.length < 0}>
<InputLabel id="brand-label">Brand</InputLabel>
<Select
labelId="brand-label"
id="brandId"
label="Brand"
value={form.brandIdId}
onChange={(e) => { e.target.id = 'companyId'; onChange(e) }}
>
{brandRenderList}
</Select>
<FormHelperText>{form.errors.brandId}</FormHelperText>
</FormControl>
<FormControl
variant="outlined"
className={classes.formControl}
error={form.errors.modelId? true : false}
disabled={modelRenderList.length < 0}>
<InputLabel id="model-label">Model</InputLabel>
<Select
labelId="model-label"
id="modelId"
label="Model"
value={form.modelId}
onChange={(e) => { e.target.id = 'modelId'; onChange(e) }}
>
{modelRenderList}
</Select>
<FormHelperText>{form.errors.modelId}</FormHelperText>
</FormControl>
...
)
MyComponent.js
const selectedBrandId = useSelector(state => state.data.form.brandId);
// fetch brands
const brands = useSelector(state => state.brand.brands);
useEffect(() => {
if (Object.keys(brands).length === 0) {
dispatch(getBrands())
} else if (brandRenderList.length <= 0) {
brands.brands.forEach(brand => {
brandRenderList.push(<MenuItem value={brand._id} key={brand._id}>{brand.name}</MenuItem>)
})
}
}, [brands])
// fetch models
const models = useSelector(state => state.model.models);
useEffect(() => {
if(!selectedBrandId ){return}
else if (Object.keys(models).length === 0) {
dispatch(getModels({brandId: selectedBrandId }))
} else if (modelRenderList.length <= 0) {
models.models.forEach(model => {
modelRenderList.push(<MenuItem value={model._id} key={model._id}>{model.name}</MenuItem>)
})
}
}, [brands])
ParentComponent.js
If I put a static brandId, everything works just as desired. Obviously I want a dynamic one, which reacts to the user input in the brand select component.
// this works
const selectedBrandId = '6018f90b94a59215703adba0';
// this doesn't
const selectedBrandId = useSelector(state => state.data.form.brandId);
I appreciate any feedback :)

Answer 1

Hi mate i feel you i have been stuck for the same things few week ago at work !
I'm asking myself who had texted this nonsense warning alert: "You have provided an out-of-range value " you get this error just because the selectbox needs a defaultValue property. Insane bullsh** i agree and not really helpful for debug !
Hope you can fix it and keep coding have a great day !