Implement Multi Select Box in ReactJS

First, we need to install multiselect-react-dropdown package.

It has the multi select functionality with various features like selection limit, CSS customization, checkbox, search option, disable preselected values, flat array, keyboard navigation for accessibility and grouping features. Also it has feature to behave like normal dropdown(means single select dropdown).

import React,{useState} from 'react';
import {Multiselect} from 'multiselect-react-dropdown'
import './App.css';
function App() {
  const data = [
     {id:1,fruit:"banana"},
     {id:2,fruit:"pineapple"},
     {id:3,fruit:"mango"},
     {id:4,fruit:"apple"}
  ]
const [options] = useState(data);
return (
  <div style={{width:"80%",justifyContent:"center",display:"flex"}}>
     <div className="App">
        <h3>Multi Select Box</h3>
        <Multiselect options={options} displayValue="fruit" />
     </div>
  </div>
);
}
export default App;

User Interface of Multi Select Box