MultiSelect dropdown in React

Today we will show you how to create a multi-select dropdown in React. Here, we will use the react-select npm package to implement a multi-select dropdown in React JS.

Checkout more articles on ReactJS

• Handle drag over and out in React
• Conditionally change the row style in React DataTable
• Get the country flag from the country code in React
• Implement server side pagination in React AG Grid
• How to add sass or scss in React
• Implement multi-languages in React

Demo Application

Output - MultiSelect dropdown in React - Clue Mediator

Steps to implement multi-select dropdown

1. Install react-select package
2. Add multi-select dropdown
3. Output

1. Install react-select package

Let’s create a react application using `create-react-app` and install the react-select npm dependency by running the command.

npm install react-select

2. Add multi-select dropdown

We recommend that you check out the article below.

Implement dropdown in ReactJS

Use the `isMulti` property to convert the dropdown into the multi-select dropdown.

import Select from 'react-select';
...
...
<select ...="" ismulti="">
Let’s create an example where we can implement the multi-select dropdown. Check the following code.App.js
import React, { useState } from 'react';
import Select from 'react-select';function App() {
  const data = [
    {
      value: 1,
      label: "cerulean"
    },
    {
      value: 2,
      label: "fuchsia rose"
    },
    {
      value: 3,
      label: "true red"
    },
    {
      value: 4,
      label: "aqua sky"
    },
    {
      value: 5,
      label: "tigerlily"
    },
    {
      value: 6,
      label: "blue turquoise"
    }
  ];  const [selectedOption, setSelectedOption] = useState(null);  // handle onChange event of the dropdown
  const handleChange = e => {
    setSelectedOption(e);
  }  return (

      MultiSelect Dropdown - Clue Mediator      </select>

      {selectedOption && <div style={{ margintop: 20, lineheight: '25px' }}>
        <b>Selected Options</b><br>
        <pre>{JSON.stringify(selectedOption, null, 2)}</pre>
      </div>}

  );
}

export default App;

3. Output

Run the application and check the output in the browser.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project