Solution 1 :

First change value to the id

<MenuItem key={} value={}>

Since you need that to be guaranteed to be unique.

And also change the checkbox:

  <Checkbox checked={selected?.includes(} />

Then you will store an array of ids in the selected state.

  const handleChange = (event) => {

And if you ever need to get back to the options (it would be bad to store the whole option because it’d be duplicated state) you can do:

// If after the handlechange fn => options.find(option => === selectedId))

// If inside the handlechange fn => options.find(option => === selectedId))

Also change renderValue to show the names in the box when they are selected:

          renderValue={(selected) =>
                (selectedId) =>
                  options.find((option) => === selectedId)?.name
              .join(", ")

You might want to break that map/find statement into a common function.

You also need to change the delete handler to clear out selected items that have been deleted:

                onClick={(e) => {
                  setSelected((prev) => prev.filter((id) => id !==;
                  setOptions(options.filter((o) => !==;

As for the selected items being fetched from the server and them being a list of names, you will need to work back from the names to the id.

const initialSelectedValues = => options.find(option => === selectedName).id)

Note this seems a little like a bad API design since you should always use ID only. What happens if there are 2 people with the same name? Probably you wouldn’t be able to select the second one as it can not be disambiguated. The server should return ids really.

Presumably, you have endpoints to do the following. I have recommended what to do or each (I don’t know your URL scheme):

  • HTTP GET the selected items from the server. This should return an array of IDs from the back end store/database and not really the names. Well, it could return both, but you shouldn’t use the name from there even if you do, since it will break the handling of duplicates.
  • HTTP POST the selected items back to the server. This should be changed to ingest an array of selected IDs only.
  • HTTP POST a new item to the list when they click “add item”. Not necessarily selected. If you don’t have a way of managing the list you wouldn’t be able to have an item that is added, but not selected. This would accept an object containing just the name, and then the server would create this in the store, and whilst doing so, persist an ID as well against that name in the store/db.
  • HTTP DELETE an item from the list when they click “delete item”. Note this is not about removing a selected item, it’s about removing an option, which may not necessarily be selected since you allow new options that are unchecked. This would just accept the ID to delete and the backend would remove it from the store.
  • HTTP GET all the items in the list, including selected and unselected. This would return an array of objects, each containing an id and name. This is what replaced rawArray.

Solution 2 :

 const handleChange = (event) => {
    const value =;
     const filterObjects = options.filter((o) => value.includes(
console.log("get id and name of selected here", filterObjects);

Problem :

Here i’m using select from material ui, and have a question: how to get an object (handleChange function) when user clicks from dropdown ?
in my handleChange i want to have object and not just ‘name’, and those places where i’m using ‘selected’ i could just pick it from object like this (if needed).
and another question: i’m getting data to ‘selected’ from api the thing is that that data shows on select itself but nothing shows in dropdown. any advices how to make this code simpler?

import React, { useState } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import InputLabel from "@material-ui/core/InputLabel";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import DeleteIcon from "@material-ui/icons/Delete";
import CreateIcon from "@material-ui/icons/Create";
import { MenuProps, useStyles } from "./utils";
import AddUser from "./AddUser";
import { Button } from "@material-ui/core";
import EditUser from "./EditUser";

function App() {
  const rawOptions = [
    { id: 1, name: "Oliver Hansen" },
    { id: 2, name: "Van Henry" }

  const classes = useStyles();
  const [selected, setSelected] = useState([]);
  const [options, setOptions] = useState(rawOptions);
  const [openAddModal, setOpenAddModal] = useState(false);
  const [openUpdateModal, setOpenUpdateModal] = useState(false);
  const [edit, setEdit] = useState({
    id: null,
    name: ""
  const handleChange = (event) => {
    const value =;
    console.log("get id and name of selected here", value);

  function addUser(newArray) {
    const newTodos = [...options, newArray];


  const openAddUser = () => {
  const openUpdateUser = (event, data) => {

  // console.log("id", edit);
  const closeAddModal = () => {
  const closeUpdateModal = () => {

  const updateUser = (updateUser) => {
    setOptions( => ( === ? updateUser : user))

  return (
    <FormControl className={classes.formControl}>
        <InputLabel id="mutiple-select-label">Multiple Select</InputLabel>
          value={selected || []}
          renderValue={(selected) => selected}
          {, index) => (
            <MenuItem key={index} value={}>
                <Checkbox checked={selected?.includes(} />
              <ListItemText primary={}>{option}</ListItemText>

                onClick={(e) => {
                  setOptions(options.filter((o) => !==;
                  onClick={(e) =>
                    openUpdateUser(e, { id:, name: })
        <Button onClick={openAddUser} style={{ backgroundColor: "#287B7A" }}>
          Add User



export default App;


Comment posted by walee

thnx, from api i’m getting for example like this: [“Oliver Hansen”,”Van Henry”], how to transform data to a list of ids before passing to value ?

Comment posted by adsy

Gotcha let me edit my answer, give me some mins

Comment posted by adsy

Ok added. Note what I said that since the API doesn’t return IDs there is a potential flaw.

Comment posted by adsy

Also you should change your

Comment posted by walee

so it goes like this, this whole thing is a component, i add user from here and sumbit it to the server, and in another component i have exactly this same thing but there i’m getting this data i sent i’m getting back and i can update it or delete it (i’m getting same data back what i sent), so i should send id ?

Comment posted by walee

could you provide codesandbox, im getting an empty array

Comment posted by……

Comment posted by

Your answer could be improved with additional supporting information. Please “edit” to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center: