I have multiple dropdowns in react js & each row have two dropdowns like first for Gender & second for Names
The list is displaying properly but I want to when user will select first dropdown then second dropdown should be open as per previous dropdown value.
Like if user select Gender Male in first dropdown then in second dropdown only male names should be display if user select Gender Female in first dropdown then in second dropdown only female names should be display.
My Code:-
const body = [
{
"Field_ID": 1,
"FieldName_CR": "Sohan",
"gender_ID": 1,
"male": "Male"
},
{
"Field_ID": 2,
"FieldName_CR": "Mohan",
"gender_ID": 1,
"male": "Male"
},
{
"Field_ID": 3,
"FieldName_CR": "Gaurav",
"gender_ID": 1,
"male": "Male"
},
{
"Field_ID": 4,
"FieldName_CR": "Hakim",
"gender_ID": 1,
"male": "Male"
},
{
"Field_ID": 5,
"FieldName_CR": "Sumit",
"gender_ID": 1,
"male": "Male"
},
{
"Field_ID": 9,
"FieldName_CR": "Neha",
"gender_ID": 2,
"female": "Female"
},
{
"Field_ID": 10,
"FieldName_CR": "Seema",
"gender_ID": 2,
"female": "Female"
},
{
"Field_ID": 11,
"FieldName_CR": "Anuradha",
"gender_ID": 2,
"female": "Female"
},
{
"Field_ID": 12,
"FieldName_CR": "Meenu",
"gender_ID": 2,
"female": "Female"
},
{
"Field_ID": 13,
"FieldName_CR": "Harsha",
"gender_ID": 2,
"female": "Female"
}
]
const[body, setBody] = useState([]);
const[name, setName] = useState([]);
setBody(body);
setName([...new Set(body.map(item => item.gender_ID))]);
console.log(body);
return (
<>
<Box>
<TextField
className="ruleContainer"
select
name="gender"
label="Gender"
variant="outlined"
size="small"
value={inputField.gender}
onChange={(event) =>
handleChangeInput(inputField.id, event)
}
>
{name ? name.map((opt) => (
<MenuItem key={opt} value={opt}>
{opt}
</MenuItem>
)) : ''}
</TextField>
<TextField
className="ruleContainer"
select
name="name"
label="Name"
variant="outlined"
size="small"
value={inputField.name}
onChange={(event) =>
handleChangeInput(inputField.id, event)
}
>
{body ? body.map((opt) => (
<MenuItem key={opt} value={opt}>
{opt.FieldName_CR}
</MenuItem>
)) : ''}
</TextField>
</Box>
<Box>
<TextField
className="ruleContainer"
select
name="gender"
label="Gender"
variant="outlined"
size="small"
value={inputField.gender}
onChange={(event) =>
handleChangeInput(inputField.id, event)
}
>
{name ? name.map((opt) => (
<MenuItem key={opt} value={opt}>
{opt}
</MenuItem>
)) : ''}
</TextField>
<TextField
className="ruleContainer"
select
name="name"
label="Name"
variant="outlined"
size="small"
value={inputField.name}
onChange={(event) =>
handleChangeInput(inputField.id, event)
}
>
{body ? body.map((opt) => (
<MenuItem key={opt} value={opt}>
{opt.FieldName_CR}
</MenuItem>
)) : ''}
</TextField>
</Box>
</>
)Thanks for your efforts!