How to use Multi-Select Dropdown in react-bootstrap

Question

I am using react-bootstrap library. This library having a module called DropdownButton. So i am able to display data in dropdown. This is single selection data.

  <DropdownButton
            bsStyle="success"
            title={this.state.addLeadStageSelectTitle}
            key={"addleadstageDropDown"}
            id={"addleadstageIDAdd"}
            onSelect={this.handleSelectLeadStageAdd}
            >
                {this.state.vtx_sales_lead_status.map(objs => {
                   return (
                     <MenuItem eventKey={objs.id}>{objs.name}</MenuItem>
                  )

                }
                  )}
          </DropdownButton> 

But I am trying to create it multiselect with same library.

Answer 1

I've checked the react-bootstrap documentation and it looks like there isn't a multiselect functionality.

So you can use a third party library, like: react-bootstrap-multiselect.

It's a Multiselect component for React (with Bootstrap). This is a React wrapper around an existing jQuery / Bootstrap library: bootstrap-multiselect

Basic usage:

import Multiselect from 'react-bootstrap-multiselect'

const data = [{ value:'One', selected:true }, { value: 'Two' }, { value:'Three' }]

const App = props => {
  return <Multiselect onChange={props.handleChange} data={data} multiple />
}

Demo.

Answer 2

It is supported now:

import { Form } from 'react-bootstrap';

// [...]

<Form>
  <Form.Control as="select" multiple value={options} onChange={onSelectedOptionsChange}>
    {options.map(options => (
      <option key={option.name} value={option.value}>
        {option.name}
      </option>
    ))}
  </Form.Control>
</Form>