Material ui list of select item need to be selected

Question

i have created selected box..using functional component...i am getting list of items from the back end, i am looping that list and showing in the front end....now i need to be selected item need to show in the box what i have selected...could any one help on this...

Please see my example code in this link https://codesandbox.io/s/gallant-water-fnqiv

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

const lists = ["Ten", "twenty", "Thirty", "Fourty", "Fifity", "Sixty"];
export default function SimpleSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState("");

  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);
  React.useEffect(() => {
    setLabelWidth(inputLabel.current.offsetWidth);
  }, []);

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

  return (
    <div>
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
          Age
        </InputLabel>
        <Select
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          value={age}
          onChange={handleChange}
          labelWidth={labelWidth}
        >
          <MenuItem value={""}>
            {lists.map(item => {
              <li>{item.list}</li>;
            })}
          </MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

Answer 1

you can try this-

<div>
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
          Age
        </InputLabel>
        <Select
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          value={age}
          onChange={handleChange}
          labelWidth={labelWidth}
        >
          {lists.map(item => (
            <MenuItem value={item}>{item}</MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>

https://codesandbox.io/s/material-ui-select-m8lgt

Answer 2

There is no property in the array named, item.list , so you need to use item alone which itself gives the value you want.

Also make sure <MenuItem value={item}> is inside the lists.map() method..

Include return statement of the MenuItemis inside ofthe lists.map() method which throws error in your codesandbox link

And hence,

Change:

<MenuItem value={""}>
            {lists.map(item => {
              <li>{item.list}</li>;
            })}
          </MenuItem>

To:

{lists.map(item => {
            return (
              <MenuItem value={item}>
                <li>{item}</li>
              </MenuItem>
            );
          })}

Forked Codesandbox

Answer 3

Updated code sandbox link

Your MenuItem was wrong.

{lists.map(item => (
            <MenuItem value={item}>{item}</MenuItem>
          ))}