CODEWITHSUNDEEP
reactjsmaterial-ui
Amit P.
Amit P.

Reputation: 23

Change the value into the react select menu item does not populated into the react material-ui

Following are the URL for the codesandbox for the react select menu item.

React select menu item Here I am wrapping the menu item with div and change the values of select drop down but the values are not populating into the select drop down on change. How to give runtime values to select dropdown on onChange event.

Could some one let me know the idea solutions for this?

Thanks

Upvotes: 0

Views: 2616

Answers (1)

Pratap Sharma
Pratap Sharma

Reputation: 2743

Is this what you wanted?

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState(10);

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

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          onChange={handleChange}
        >

            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

component needs directly as a child. Or else it wont populate. If you want to use a div then you can replace div with fragments. But I don't think we can style a fragment. You need to provide a default value to the state.

Link to codesandbox which is working fine and I think its exactly what you wanted

Just let me know if this was what you wanted or if I'm missing anything.

Upvotes: 2

Related Questions