Multiple select dropdown with unique selection - React JS

Question

I have 4 select dropdowns.
Selected values should not appear on the rest of the dropdowns list

My state looks like this

this.state = {
    selectedDropdownArray: {},
    dropdownArray: ['select','1','2','3','4','5']
}

below is my select dropdown component

<SelectDropdown
    options={this.state.dropdownArray}
    value={this.getValue()}
    onChange={this.handleChange.bind(this)}

On handleChange function i am just pushing the value to an object needed for rest of the work first then i am modifying the dropdownArray . The Array List of dropdown should filter based on the selection.

Below is my handleChange function which the dropdown values are filtered.

handleChange(name, value){
    switch(name){
        case '1' :
            this.state.selectedDropdownArray["0"] = value === "select" ? null : value
        break;
        case '2' :
            this.state.selectedDropdownArray["1"] = value === "select" ? null : value
        break;
        case '3'
        ...
        ...
    }

    let filter = Object.values(this.state.selectedDropdownArray);
    let difference = this.state.dropdownArray.filter(x => !filter.includes(x));

}

If 1st dropdown with value 1 is selected, the difference has now the filtered array [2,3,4,5] which i can setState to dropdownArray.

But the 1st dropdown list does not have 1 to display in this select, since the array is already filtered.

What is the valid approach to achieve this problem to have unique selection for each 4 select dropdowns.

xadm · Accepted Answer · 2019-04-08 10:29:31Z

1

1st: Define selected as array:

this.state = {
  selectedDropdownArray: [],
  dropdownArray: ['select','1','2','3','4','5']
}

If it is not required for other reasons - it won't be necessary to use Object.values() later in filtering.

2nd: Avoid binding in render, it's better to bind this.handleChange in constructor or use arrow syntax - read react docs about handling events, passing parameters...

3rd: You can use options filtering for each instance separately, sth like:

<SelectDropdown
  options={this.state.dropdownArray.filter(x => !this.state.selectedDropdownArray.includes(x) || x===this.state.selectedDropdownArray[0])}
  value={this.state.selectedDropdownArray[0] || ''}
  onChange={this.handleChange}
/>

Of course use next indexes for next <SelectDropdown/> instances ;)

answered Apr 8, 2019 at 10:29

xadm

8,4463 gold badges17 silver badges27 bronze badges

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

4 Comments

Matarishvan Over a year ago

I used selected as object just to avoid .push which will have multiple entires.

Matarishvan Over a year ago

Do you mean array.push with same key if exists

xadm Over a year ago

No need to use push - just use indexed array access - try in console: var arr=[]; arr[3]=true; console.log(arr); arr[3]='whatever'; console.log(arr);

Matarishvan Over a year ago

Got it.. I implemented successfully. Thanks man for your time.

Collectives™ on Stack Overflow

Multiple select dropdown with unique selection - React JS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related