Unable to Select options from select component using material ui react

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

};

Yone · Accepted Answer · 2022-10-06 15:50:08Z

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>

Bojan Tomić · Accepted Answer · 2022-10-06 16:08:55Z

1

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.

edited Oct 6, 2022 at 16:08

answered Oct 6, 2022 at 16:02

Bojan Tomić

1,11512 silver badges20 bronze badges

1 Comment

Yone Over a year ago

that's the right notice, @Advi it's fair to accept this answer

RedEnum · Accepted Answer · 2022-10-06 14:29:46Z

0

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 >
);

answered Oct 6, 2022 at 14:29

RedEnum

1626 bronze badges

1 Comment

Advi Over a year ago

still options are not slectable, if i select one of the options , its not selecting

Collectives™ on Stack Overflow

Unable to Select options from select component using material ui react

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related