Loading

How to get multiple selected options value in React JS?

How to get multiple selected options value in React JS?

selvi jp

5y711React

multiselect dropdown options display api from Db

onChange={this.submit}

options={objectArray}

displayValue="key"

className="multi"

selectedValues={selectedValues}

/>

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vaibhav Chauhan5y ago
In componentdidMount() function you can fetch data from API and set it in the state selectedValues
```
componentDidMount(){
 fetch("api url here")
    .then(response=>{this.setState({selectValues:response})});
}
```
some thing like this
selvi jp5y ago
I want to fetch from API
Vaibhav Chauhan5y ago
You need to manage selectedItems array for multiselect dropdown in current state so you need to remove item from that array on selecting some thing from dropdown and remove the item from array when deselecting from dowpdown.
options={this.state.options} // Options to display in the dropdown
selectedValues={this.state.selectedValue} // Preselected value to persist in dropdown
onSelect={this.onSelect} // Function will trigger on select event
onRemove={this.onRemove} // Function will trigger on remove event
displayValue="name" // Property name to display in the dropdown options
/>

onSelect(selectedList, selectedItem) {
    //add selected item in this.state.selectedValue
}

onRemove(selectedList, removedItem) {
    .//remove deselected item from this.state.selectedValue
}
Reference:
https://www.npmjs.com/package/multiselect-react-dropdown