reactjsreact-bootstrap

How to use Multi-Select Dropdown in react-bootstrap


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.


Solution

  • Here is a multi-select example using hooks and react-bootstrap.

    import React, { useState } from "react";
    import { Col, Form } from "react-bootstrap";
    
    export default function App() {
      const [field, setField] = useState([]);
    
      return (
        <Form.Group as={Col} controlId="my_multiselect_field">
          <Form.Label>My multiselect</Form.Label>
          <Form.Control as="select" multiple value={field} onChange={e => setField([].slice.call(e.target.selectedOptions).map(item => item.value))}>
            <option value="field1">Field 1</option>
            <option value="field2">Field 2</option>
            <option value="field3">Field 3</option>
          </Form.Control>
        </Form.Group>
      );
    }