Material UI Select Field multiselect

I tried several times the example given in the documentation. but it didn’t work well for me.
can any one help me….
this is the code

import React, {Component} from 'react';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';

const names = [
  'Oliver Hansen',
  'Van Henry',
  'April Tucker',
  'Ralph Hubbard',
  'Omar Alexander',
  'Carlos Abbott',
  'Miriam Wagner',
  'Bradley Wilkerson',
  'Virginia Andrews',
  'Kelly Snyder',
];

/**
 * `SelectField` can handle multiple selections. It is enabled with the `multiple` property.
 */
export default class SelectFieldExampleMultiSelect extends Component {
  state = {
    values: [],
  };

  handleChange = (event, index, values) => this.setState({values});

  menuItems(values) {
    return names.map((name) => (
      <MenuItem
        key={name}
        insetChildren={true}
        checked={values && values.indexOf(name) > -1}
        value={name}
        primaryText={name}
      />
    ));
  }

  render() {
    const {values} = this.state;
    return (
      <SelectField
        multiple={true}
        hintText="Select a name"
        value={values}
        onChange={this.handleChange}
      >
        {this.menuItems(values)}
      </SelectField>
    );
  }
}

http://www.material-ui.com/#/components/select-field

the select property works but it doesnt select multiple options. when i check the states.value it only includes a single value not a array of values

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

This example didn’t work for me either. To add the multi-select feature you have to manually add the new value to the state, so the handleChange function from the example would look something like this:

  handleChange(event, index, values)  { 
    this.setState({ 
     values: [...this.state.values , values]
    });
   }

EDIT: I updated my version of material-ui to the latest stable version and their example worked like a charm

Method 2

A much better approach is possible. In the lasted version of material UI.

import Select from '@material-ui/core/Select';
import MenuText from '@material-ui/core/MenuText';
import {useState} from 'react';

const App = () => {
   const [selected,setSelected] = useState([]); 
   return <Select multiple={true} value={selected} onChange={(event) => setSelected(event.target.value)}>
   <MenuItem>Val - 1</MenuItem>
   <MenuItem>Val - 2</MenuItem>
   <MenuItem>Val - 3</MenuItem>
   <MenuItem>Val - 4</MenuItem>
</Select> 
}

Make sure to set the value of select as an array. Otherwise, It will not work

Method 3

This worked for me for old material ui version. You can add multiple items and deselect to remove them.

handleChange(event, index, values)  { 
   this.setState({ 
     values: [...values]
   });
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x