How to use Multi-Select Dropdown in React-Bootstrap ?

In ReactJS applications, we always need to add the UI component that allows us to select multiple options from the DropDown list. So in Bootstrap, the Multi-Select Dropdown is a UI component that allows us to select multiple different options from the list of dropdown menus. Additionally, we can do the filtering, tagging, and other options to make it more usable. In this article, we will see how we can use the Multi-Select Dropdown in React-Bootstrap.

Prerequisites:

• ReactJS
• ReactJS Setting up Development Environment

Steps to React Application and installing Bootstrap:

• Create a React application using the following command:

npx create-react-app multi-select

• After creating your project folder(i.e. multi-select), move to it by using the following command:

cd multi-select

• Now install react-bootstrap in your working directory i.e. multi-select by executing the below command in the VScode terminal:

npm install react-bootstrap bootstrap

• Now we need to Add Bootstrap CSS to the index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

Project Structure:

Example 1: In this example, we are creating a multi-select dropdown in React using the React-Bootstrap library. Here, the ‘DropDown’ functional component initially initializes the state variable ‘select_languages’ to manage the selected languages. The the dropdown renders the languages of ‘C++’, ‘Java’ etc. Users can select the options by clicking on the language. The selected language is been displayed below the dropdown and it is dynamically updated when the user deselects the option.

Javascript

//App.js

import React, { useState } from 'react';
import { Dropdown } from 'react-bootstrap';

const DropDown = () => {
    const [selected_languages, set_Selected_languages] =
        useState([]);
    const languages =
        ['C++', 'Java', 'ReactJS', 'Spring Boot'];
    const toggleLang = (option) => {
        if (selected_languages.includes(option)) {
            set_Selected_languages(
                selected_languages.filter((item) =>
                    item !== option));
        } else {
            set_Selected_languages(
                [...selected_languages, option]);
        }
    };
    return (
        <div>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <Dropdown>
                <Dropdown.Toggle variant="success"
                                 id="dropdown-basic">
                    Select Options
                </Dropdown.Toggle>
                <Dropdown.Menu>
                    {languages.map((option, index) => (
                        <Dropdown.Item
                            key={index}
                            onClick={() => toggleLang(option)}
                            active={
                                selected_languages.includes(option)}
                        >
                            {option}
                        </Dropdown.Item>
                    ))}
                </Dropdown.Menu>
            </Dropdown>
            <div>
                <strong>Selected Options:</strong>
                    {selected_languages.join(', ')}
            </div>
        </div>
    );
};
export default DropDown;

Steps to run: Run the application using the following command from the root directory of the project:

npm start

• Now open your browser and go to http://localhost:3000/, you will see the following output

Output:

Example 2: In this example, we are using the custom Multi-Select Dropdown which is done using the React-Bootstarp and custom CSS styling. There is a ‘SelectDropDown‘ functional component that manages the state of the ‘select_Course’. When the button is clicked, the list of options with the checkboxes is been shown. Users can select or deselect the courses and the selected courses are shown to the user. The Form.check component from Bootstrap is mainly used to create the checkboxes for each of the course options in the dropdown list.

Javascript

//App.js

import React, { useState } from 'react';
import { Form } from 'react-bootstrap';
const SelectDropdown = () => {
    const [select_Courses, set_Select_Courses] =
        useState([]);
    const [isOpen, setIsOpen] = useState(false);
    const courses = [
        { id: 1, label: 'GATE' },
        { id: 2, label: 'DSA' },
        { id: 3, label: 'JAVA' },
        { id: 4, label: 'C++' },
        { id: 5, label: 'Web Development' }
    ];
    const dropDownShow = () => {
        setIsOpen(!isOpen);
    };
    const courseChange = (event) => {
        const courseId =
            parseInt(event.target.value);
        const choosen = event.target.checked;

        if (choosen) {
            set_Select_Courses(
                [...select_Courses, courseId]);
        } else {
            set_Select_Courses(
                select_Courses.filter((id) =>
                    id !== courseId));
        }
    };
    return (
        <div>
            <h1 style={
                    { color: 'green', marginBottom: '20px' }}>
                GeeksforGeeks
            </h1>
            <div className="d-flex justify-content-center">
                <div className="custom-dropdown">
                    <button
                        className=
                            "custom-dropdown-toggle green-button"
                        type="button"
                        id="multiSelectDropdown"
                        onClick={dropDownShow}
                    >
                        Select Options
                    </button>
                    {isOpen && (
                        <div className=
                                {`custom-dropdown-menu
                                    ${isOpen ? 'show' : ''}`}
                                aria-labelledby="multiSelectDropdown">
                            {courses.map((option) => (
                                <Form.Check
                                    className="custom-checkbox"
                                    key={option.id}
                                    type="checkbox"
                                    id={`option_${option.id}`}
                                    label={option.label}
                                    checked=
                                        {select_Courses.includes(option.id)}
                                    onChange={courseChange}
                                    value={option.id}
                                />
                            ))}
                        </div>
                    )}
                </div>
                <div style={{ marginLeft: '20px', width: '50%' }}>
                    <h2>Selected Items:</h2>
                    <ul>
                        {select_Courses.map((optionId) => (
                            <li key={optionId}>
                                {courses.find(option =>
                                    option.id === optionId)?.label}
                            </li>
                        ))}
                    </ul>
                </div>
            </div>
        </div>
    );
};
export default SelectDropdown;

Output: