Material UI Select Multiple Selection in Array

Question

I created a Select using React that allows the user to select multiple options. The problem is that the Select displays the ID of the selected item, instead of their name. How can I change the code in a way that the Select display the names separated by commas (now shows the IDs separated by commas), while keeping the array of ids for later processing.

Any idea how to fix it? Here is the code to CodeSanbox

I have the following array in a Material UI Select:

const names = [
  { id: "1", value: "Oliver Hansen" },
  { id: "2", value: "Van Henry" },
  { id: "3", value: "Omar Alexander" }
];

This is the code that renders the Multiple Select:

<Select
          labelId="demo-mutiple-checkbox-label"
          id="demo-mutiple-checkbox"
          multiple
          value={personName}
          name="first"
          onChange={handleChange}
          input={<OutlinedInput label="Tag" />}
          renderValue={(selected) => selected.join(", ")}
        >
          {names.map((name) => (
            <MenuItem key={name.id} value={name.id}>
              <Checkbox checked={personName.indexOf(name.id) > -1} />
              <ListItemText primary={name.value} />
            </MenuItem>
          ))}
        </Select>

Answer 1

I found one possible solution for your issue.

check if it works for you.

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

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

const names = [
  { id: "1", value: "Oliver Hansen" },
  { id: "2", value: "Van Henry" },
  { id: "3", value: "Van Henry" }
];

export default function NativeSelects() {
  const classes = useStyles();
  const [personName, setPersonName] = React.useState([]);

  const handleChange = (event) => {
    const {
      target: { value }
    } = event;
    setPersonName(
      // On autofill we get a the stringified value.
      typeof value === "string" ? value.split(",") : value
    );
  };

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="age-native-simple">
          Names here to select from
        </InputLabel>
        <Select
          labelId="demo-mutiple-checkbox-label"
          id="demo-mutiple-checkbox"
          multiple
          value={personName}
          name="first"
          onChange={handleChange}
          input={<OutlinedInput label="Tag" />}
          renderValue={(selected) => selected.map(obj=> names[obj - 1].value).join(", ")}
        >
          {names.map((name) => (
            <MenuItem key={name.id} value={name.id}>
              <Checkbox checked={personName.indexOf(name.id) > -1} />
              <ListItemText primary={name.value} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

Updated Code

Answer 2

just you can do this:

renderValue={
    (selected) => 
        names.filter( name => selected.includes(name.id) )
            .map( record => record.name )
            .join(", ")
}