I have a drop downmenu component(material ui) and want to render different Textfields in another file based on the selection that was made in this dropdown menu. In other words if value is residential then show the textfields from the residential component
const selections = [
{
value: 'Residential',
label: 'Residential',
},
{
value: 'Commercial',
label: 'Commercial',
},
{
value: 'Hybrid',
label: 'Hybrid',
},
{
value: 'Corporate',
label: 'Corporate',
},
];
export default function Selection() {
const [selection, setSelection] = React.useState('');
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setSelection(event.target.value);
};
return (
<Box
component="form"
sx={{
'& .MuiTextField-root': { m: 1, width: '25ch' },
}}
noValidate
autoComplete="off"
>
<div>
<TextField
id="outlined-select-currency"
select
label="Select"
value={selection}
onChange={handleChange}
helperText="Please select your building type"
>
{selections.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
</Box>
);
}