ReactJS: How to perform multiple selection in Dropdown?

Question

I have developed the dropdown selection for the single selection. Now i want to make it as multiple selection. How can i pass the multiple ids in the API response. ?

My working code for single selection is like this:

class Xyz extends React.Component {
    constructor(props) {
        super(props);
        this.state = {id: props.defaultValue.id, name: props.defaultValue.name, open: true};
    }
    updateData = () => {
        console.log(this.state.id)
        this.props.onUpdate({id: this.state.id, name: this.state.name});
        api.request({url: `/api-route/${this.props.id}`, method: 'put', data: {[this.field]: this.state.id} })
            .then(res => (`${this.field} have been updated`)
            .catch(er => console.log(er));
    }
    render() {
        return (
            <React.Fragment>
                <select
                    multiple={true}
                    defaultValue={[this.props.defaultValue.id]}
                    onChange={ev => this.setState({ id: ev.target.value, name: ev.nativeEvent.target[ev.nativeEvent.target.selectedIndex].text })}>
                    {this.props[this.field].map((name, index) => <option key={index} value={index}>{name}</option>)}
                </select>
                <button type='button' className='btn btn-primary' onClick={this.updateData}>Save</button>
            </React.Fragment>
        );
    }
}

Nidhin Kumar · Accepted Answer · 2019-11-08T13:05:30.277

1

For Multiple selections, you can try the below plugin

https://github.com/JedWatson/react-select

const options = [];  

 class App extends React.Component {
  state = {
    selectedOption: null,
  }

  constructor(props) {
    super(props);
    this.props[this.field].map((name, index) => {
      options.push({ value: index, label: name });
    });
  }
  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  }
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
        isMulti
      />
    );
  }
}

To know more about react-select check the below post

https://medium.com/@nidhinkumar/react-select-852e90d549df

edited Nov 08 '19 at 13:05

answered Nov 08 '19 at 12:05

Nidhin Kumar

3,278
9
40
72

In that case how can i pass the options attributes like this `` – TMA Nov 08 '19 at 12:13
@aananddham that will be taken care of by the plugin – Nidhin Kumar Nov 08 '19 at 12:15
Okay, so what should i pass in the `options={options}` ? How it can get `{name}` value ? – TMA Nov 08 '19 at 12:17
I have reviewed your updated answer on your medium blog; can you please update it with my code ? – TMA Nov 08 '19 at 12:36
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/202051/discussion-between-aananddham-and-nidhin-kumar). – TMA Nov 08 '19 at 12:56
Hey, in multi select the options are displaying as a duplicate values. `var categories = this.category; categories.map((name, index) => { if (!productCatOptions.includes(name)) { productCatOptions.push({ value: index, label: name }); } });` – TMA Nov 11 '19 at 10:49
@aananddham does your categories have duplicate values. If so remove the duplicate values from categories. – Nidhin Kumar Nov 11 '19 at 12:58
I got the answer in a separate thread: https://stackoverflow.com/q/58800392/7995957 – TMA Nov 11 '19 at 13:11

ReactJS: How to perform multiple selection in Dropdown?

1 Answers1