Unable to Select options from select component using material ui react

Advi Published at Dev

Advi

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" }],

};

Yone

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.