Material UI Multiple Select | How to use Multiple Select with arrays

Question

I'm using material-ui multiple select and I've created an example based on the documentation provided from Multiple Select.

My example here: codesandbox

In my example, I want to use 2 arrays for multiple select dropdowns, 1 for each. I tried to achieve this by updating the handleChange event from:

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

to:

const handleChange = event => {
    setState({ ...state, [event.target.name]: event.target.value });
  };

When I test this update, I click on any name from the drop-down and I get this error: state.indexOf is not a function

I want to be able to use the handleChange event to work for all of the multiple select drop-downs for my example. Any help or suggestions are much appreciated.

Please change the handleChange() :-> const handleChange = event => { console.log(event); setState(event.target.value); }; — Harmandeep Singh Kalsi
– Harmandeep Singh Kalsi, Commented Jun 1, 2020 at 18:36

Vinod Sai · Accepted Answer · 2020-06-02 14:18:10Z

3

In your codesandbox, you have used only one array as state which should be changed to two

  const [state, setState] = React.useState({ first: [], second: [] });

For each select we have to give the name

<Select
      labelId="demo-mutiple-checkbox-label"
      id="demo-mutiple-checkbox"
      multiple
      value={state.first}
      name="first"
      onChange={handleChange}
      input={<Input />}
      renderValue={selected => selected.join(", ")}
    >

this is the working csb link https://codesandbox.io/s/material-demo-s1g4h?file=/demo.js:1322-1618

answered Jun 2, 2020 at 14:18

Vinod Sai

2,1323 gold badges17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Material UI Multiple Select | How to use Multiple Select with arrays

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related