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!
