So, I honestly thought this would take me 15 minutes, but I'm up around 5 hours right now. What's bothering me so much is that I know it's a simple solution, and I've tried a few different approaches as well.
I have a React App, and inside the Diagnosis Component, I have two dropdown elements that allow users to choose the Make and Model of their appliance. What I'm trying to do is allow the user to choose which Make they have, and when the make dropdown is selected, the models dropdown populates automatically.
Here is my MakeandModel.js file:
import React, { useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import makeandmodel_DATA from './makeandmodel_DATA';
const useStyles = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));
console.log(makeandmodel_DATA);
export default () => {
const classes = useStyles();
const [data, setData] = useState();
const [make, setMake] = useState('');
const [model, setModel] = useState('');
useEffect(() => {
});
const handleMakeChange = (event) => (
setMake(event.target.value)
);
const handleModelChange = (event) => (
setModel(event.target.value)
);
return (
<>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="demo-simple-select-outlined-label">Make</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={make}
onChange={handleMakeChange}
label="Make"
>
<MenuItem value="">
<em>Choose a Make</em>
</MenuItem>
{makeandmodel_DATA.map((make, index) => (
<MenuItem key={index} value={make.name}>{make.name}</MenuItem>
))}
</Select>
</FormControl>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="demo-simple-select-outlined-label">Model</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={model}
onChange={handleModelChange}
label="Model"
>
<MenuItem value="">
<em>Choose a Model</em>
</MenuItem>
</Select>
</FormControl>
<br />
</>
);
};
I also have some sample data I'm importing to try to populate my Make and Model dropdowns. Here is the code from the makeandmodel_DATA.json file:
[
{
"name": "Dyson",
"models": [
{
"name": "v12"
},
{
"name": "v10"
},
{
"name": "ball"
}
]
},
{
"name": "Oreck",
"models": [
{
"name": "Upright"
},
{
"name": "Unique"
},
{
"name": "XL"
}
]
},
{
"name": "Electrolux",
"models": [
{
"name": "Classic"
},
{
"name": "Vintage"
},
{
"name": "New School"
}
]
},
{
"name": "Kirby",
"models": [
{
"name": "Heavy"
},
{
"name": "Light"
},
{
"name": "Regular"
}
]
},
{
"name": "Hoover",
"models": [
{
"name": "Windtunnel"
},
{
"name": "Back"
},
{
"name": "Upright"
}
]
}
]
I've tried to map over the imported data, but every time I do that to find the models, I end up returning undefined.
I've also tried to wire up the useEffect function, but couldn't figure out exactly to wire it up correctly that way either.
Like I said, I feel like the solution is super simple, but I'm overlooking something fundamental. I'm really just looking for a super simple solution that looks clean and works well. If you need any other information to help us solve this problem, just ask.
Thanks in advance!
So, I honestly thought this would take me 15 minutes, but I'm up around 5 hours right now. What's bothering me so much is that I know it's a simple solution, and I've tried a few different approaches as well.
I have a React App, and inside the Diagnosis Component, I have two dropdown elements that allow users to choose the Make and Model of their appliance. What I'm trying to do is allow the user to choose which Make they have, and when the make dropdown is selected, the models dropdown populates automatically.
Here is my MakeandModel.js file:
import React, { useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import makeandmodel_DATA from './makeandmodel_DATA';
const useStyles = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));
console.log(makeandmodel_DATA);
export default () => {
const classes = useStyles();
const [data, setData] = useState();
const [make, setMake] = useState('');
const [model, setModel] = useState('');
useEffect(() => {
});
const handleMakeChange = (event) => (
setMake(event.target.value)
);
const handleModelChange = (event) => (
setModel(event.target.value)
);
return (
<>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="demo-simple-select-outlined-label">Make</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={make}
onChange={handleMakeChange}
label="Make"
>
<MenuItem value="">
<em>Choose a Make</em>
</MenuItem>
{makeandmodel_DATA.map((make, index) => (
<MenuItem key={index} value={make.name}>{make.name}</MenuItem>
))}
</Select>
</FormControl>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="demo-simple-select-outlined-label">Model</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={model}
onChange={handleModelChange}
label="Model"
>
<MenuItem value="">
<em>Choose a Model</em>
</MenuItem>
</Select>
</FormControl>
<br />
</>
);
};
I also have some sample data I'm importing to try to populate my Make and Model dropdowns. Here is the code from the makeandmodel_DATA.json file:
[
{
"name": "Dyson",
"models": [
{
"name": "v12"
},
{
"name": "v10"
},
{
"name": "ball"
}
]
},
{
"name": "Oreck",
"models": [
{
"name": "Upright"
},
{
"name": "Unique"
},
{
"name": "XL"
}
]
},
{
"name": "Electrolux",
"models": [
{
"name": "Classic"
},
{
"name": "Vintage"
},
{
"name": "New School"
}
]
},
{
"name": "Kirby",
"models": [
{
"name": "Heavy"
},
{
"name": "Light"
},
{
"name": "Regular"
}
]
},
{
"name": "Hoover",
"models": [
{
"name": "Windtunnel"
},
{
"name": "Back"
},
{
"name": "Upright"
}
]
}
]
I've tried to map over the imported data, but every time I do that to find the models, I end up returning undefined.
I've also tried to wire up the useEffect function, but couldn't figure out exactly to wire it up correctly that way either.
Like I said, I feel like the solution is super simple, but I'm overlooking something fundamental. I'm really just looking for a super simple solution that looks clean and works well. If you need any other information to help us solve this problem, just ask.
Thanks in advance!
Share Improve this question asked Jan 27, 2021 at 20:40 JimJim 1031 gold badge2 silver badges8 bronze badges3 Answers
Reset to default 7The best practice here is to create an object where you save your models by the Make name.
const models = React.useMemo(() => {
const modelsValues = {};
makeandmodel_DATA.forEach(({ name, models }) => {
modelsValues[name] = models;
})
return modelsValues;
})
You only need to save the model name as you are doing it.
Then you need to access to the selected Make models, and finally your Make select is gonna be something like this:
{make && <FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="demo-simple-select-outlined-label">Model</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={model}
onChange={handleModelChange}
label="Model"
>
<MenuItem value="">
<em>Choose a Model</em>
</MenuItem>
{models[make] ? models[make].map(model=> {
// Here goes your models option
return <MenuItem value="">
<em>Choose a Model</em>
</MenuItem>
}) : null
}
</Select>
</FormControl>}
Maybe I have a typo but If you could give me a sandbox this can be more simple to fix.
That's a great solution!
I did the same exact thing, and I added an index to the map function to add a key to each MenuItem and set the value attribute and child on each MenuItem to model.name
{make && <FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="demo-simple-select-outlined-label">Model</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={model}
onChange={handleModelChange}
label="Model"
>
<MenuItem value="">
<em>Choose a Model</em>
</MenuItem>
{models[make]
? models[make].map((model, index) => (
<MenuItem key={index} value={model.name}>{model.name}</MenuItem>
))
: null
}
</Select>
</FormControl>}
A template you can use for when using dynamic select in material UI
<Select
displayEmpty
{...register('productName', { required: 'Product Name is required' })}
renderValue={(selected) => {
if (!selected || selected.length === 0) {
return <em disabled>Choose product</em>;
} else {
return typeof selected === 'string' ? selected?.trim() : selected;
}
}}
MenuProps={{
PaperProps: {
style: {
maxHeight: 48 * 4.5 + 8,
// width: '100%',
},
},
}}
fullWidth>
{productsData.length === 0 ? (
<MenuItem disabled value=''>
<em>None</em>
</MenuItem>
) : (
productsData.map((product) => {
return (
<MenuItem key={product.id} value={product.name}>
{product.name}
</MenuItem>
);
})
)}
</Select>