React Select not allowing multiple selections

Question

I have a react app that I am currently updating which involves switching to react 16.8 and updating all libraries. I have two drop down selects from material UI, and due to this new version the multi select one no longer allows multiple options to be selected and I can't work out why. Any ideas would be appreciated!

Code:

import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const names = [
  'Oliver Hansen',
  'Van Henry',
  'Kelly Snyder',
];



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

  const handleChange = event => {
  console.log(event) //holds the selected option correctly
  setPersonName(event.target.value);
    console.log(personName) 
  };

  return (
    <div>
      <FormControl className={classname}>
        <Select
          multiple //used to be isMulti but this also no longer works
          value={personName}
          onChange={handleChange}  
          placeholder = {"choose a name"}
          options={names}
        >
        </Select>
      </FormControl>
    </div>
  );
}

Answer 1

This is because your value always contains a single string value. When you select a second items, it overrides the first value with new one. You need to assign an array of values to value prop with selected values. Push selected item in previously selected values array and update the state and on removal, remove that name from that array.

 export default function MultipleSelect() { const [selectedNames, setSelectedNames] = React.useState([]); const handleChange = event => { console.log(event) //holds the selected option correctly // if selection/addition setSelectedNames([...selectedNames, event.target.value]); // On removal, // setSelectedNames(selectedNames.filter(name => name !== event.target.value)); }; return ( <div> <FormControl className={classname}> <Select multiple //used to be isMulti but this also no longer works value={selectedNames} onChange={handleChange} placeholder = {"choose a name"} options={names} > </Select> </FormControl> </div> ); }

Answer 2

Set true value to multiple attribute:

   <Select
              multiple="true"
             // ...
            >
              // ...
            </Select>

Answer 3

Your options are currently single string. Select expects something like this (notice the value and label properties):

[
  {value: 1, label: "Oliver Hansen"},
  {value: 2, label: "Van Henry"},
  {value: 3, label: "Kelly Snyder"}
]

If you have that in order your select should be working as expected.