How to get working react select in material UI?

user_14383678 0
Viewed 673

I am using React Select material UI and the dropdown select is not working. The popup is not opening up.

I want to show react select in the modal dialog box.

import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select, { SelectChangeEvent } from "@mui/material/Select";

const [age, setAge] = React.useState("");
const handleChange1 = (event: SelectChangeEvent) => {
  setAge(event.target.value);
};
<FormControl sx={{ m: 1, minWidth: 80 }}>
  {/* <InputLabel id="demo-simple-select-autowidth-label">Age</InputLabel> */}
  <Select
    value={age}
    onChange={handleChange1}
    autoWidth
    // label="Age"
  >
    <MenuItem value="">
      <em>None</em>
    </MenuItem>
    <MenuItem value={10}>Twenty</MenuItem>
    <MenuItem value={21}>Twenty one</MenuItem>
    <MenuItem value={22}>Twenty one and a half</MenuItem>
  </Select>
</FormControl>;

I'm also attaching the screenshot of the select dropdown. This is what I'm getting now.

enter image description here

I don't know why I'm getting that outline background even if I haven't applied that anywhere.

material-ui typescript reactjs
2 Answers

I think you don't need SelectChangeEven inside (event: SelectChangeEvent) so I remove it and then the dropdown select will working fine.

enter image description here

You can try my code like below:

const handleChange1 = (event) => {
  setAge(event.target.value);
};

user_180445620

You are not using alias name while setting age
Use alias name as shown in below code

const handleChange1 = (event: SelectChangeEvent) => {
  setAge(SelectChangeEvent.target.value);
};
user_130716620
Related