Unable to Select options from select component using material ui react - reactjs

Question

I'm working on material ui react storybook . I have given customised select options but when i select options it is not selecting. Below is what i have tried if option 1 is selected it not taking any value. How do i select options ? I cannot use TextField , because i'm working on select component. I have to achieve this with the Mapping. Thanks. Below is My code.
export const SelectBasic= ({
props,
selectoptions,
}) => {
const theme = useTheme();
const [age, setAge] = React.useState('');
const handleChange = (event: SelectChangeEvent) => {
setAge(event.target.valueasstring);
};
return (
<div>
<FormControl fullWidth >
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
{selectoptions.map(item => {
return (
<MenuItem value={item.label}>{item.label}</MenuItem>
)
})}
</Select>
</FormControl>
</div >
);
}
stories.js
export const Selectdef = SelectBasic.bind({});
Selectdef .args = {
selectoptions: [{ "label": "Option 1" }, { "label": "Option 2" }, { "label": "Option 3" }],
};

Answer 1

const {
Box,
FormControl,
InputLabel,
MenuItem,
Select,
Typography
} = MaterialUI;
const OPTIONS = [{
value: 10,
label: 'ten'
},
{
value: 20,
label: 'twenty'
},
{
value: 30,
label: 'thirty'
}
];
const BasicSelect = ({options}) => {
const [age, setAge] = React.useState('');
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<Box sx={{ minWidth: 120 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
{options.map(item => <MenuItem value={item.value}>{item.label}</MenuItem>)}
</Select>
</FormControl>
<Typography>{`Currently selecting: ${age || 'undefined'}`}</Typography>
</Box>
);
}
ReactDOM.render( <BasicSelect options={OPTIONS} / > ,
document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#mui/material#latest/umd/material-ui.production.min.js"></script>

Answer 2

In your onChange function where you set state.
const handleChange = (event: SelectChangeEvent) => {
setAge(event.target.valueasstring);
};
`event.target.value` should be sent to `setAge`.
There are some code style issues but this is what breaks the option selection.

Answer 3

Your map placement is incorrect and you are missing to set a value for the MenuItem
Try this:
return (
<div>
<FormControl fullWidth >
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
{selectoptions.map((item) => {
return(
<MenuItem value={item.label}>{item.label}</MenuItem>
)
})}
</Select>
</FormControl>
</div >
);