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>

You wanted to show the names, but also keep the selected names Ids as well in the state? — Junaid Faryad
– Junaid Faryad, Commented Sep 30, 2021 at 1:40

Vinibr · Accepted Answer · 2021-09-30 01:44:01Z

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

Mahdi Farahani · Accepted Answer · 2021-12-18 15:36:23Z

2

just you can do this:

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

answered Dec 18, 2021 at 15:36

Mahdi Farahani

313 bronze badges

2 Comments

xom9ikk Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Rajkumar M Over a year ago

This one helped me to render object with discrete id values.

Junaid Faryad · Accepted Answer · 2021-09-30 01:44:23Z

1

To show the selected user's names, you can update the map part, where currently, you're using id.

You can update this to use the name.value to store/show the person's names.

{names.map((name) => (
   <MenuItem key={name.value} value={name.value}>
     <Checkbox checked={personName.indexOf(name.value) > -1} />
     <ListItemText primary={name.value} />
   </MenuItem>
 ))}

Updated Sandbox

answered Sep 30, 2021 at 1:44

Junaid Faryad

1,7071 gold badge12 silver badges17 bronze badges

3 Comments

Vinibr Over a year ago

This way might be a problem, if there is duplicate names in the array.

Gonzalo Over a year ago

Exactly, I also need the IDs list for that very reason.

Junaid Faryad Over a year ago

Yeah, in that case, this is not an optimal solution.

Catur Wicaksono · Accepted Answer · 2022-02-02 12:19:10Z

1

the simple steps I did, just focus on the renderValue property, on the Select component:

renderValue={(selected) => names.find((val) => val.id === selected).value}

the logic I use, find the value in the 'names' array, where the id is the selected id, then take the 'value' value in the 'names' array, to display.

answered Feb 2, 2022 at 12:19

Catur Wicaksono

2883 silver badges9 bronze badges

Comments

KJ Sudarshan · Accepted Answer · 2022-02-16 04:28:21Z

0

Update the Menu Items' value to be a object instead of an id.

    <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((item) => item.value)?.join(",")}
    >
      {names.map((name) => (
        <MenuItem key={name.id} value={name}>
          <Checkbox
            checked={personName.find((p) => p.id === name.id) !== undefined}
          />
          <ListItemText primary={name.value} />
        </MenuItem>
      ))}
    </Select>

answered Feb 16, 2022 at 4:28

KJ Sudarshan

3,2981 gold badge32 silver badges24 bronze badges

Collectives™ on Stack Overflow

Material UI Select Multiple Selection in Array

5 Answers 5

1 Comment

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related