React Multi Select Dropdown with Dynamic Search Tutorial

React Multi-Select Dropdown example; In this tutorial, i will explain you in detail on how to integrate multi-select dropdown with instant search in react application using the npm react-select package.

Multi select dropdown list is used when a user wants to store multiple values for the same record, whereas dropdown list is used to store a single value for a record. You can create custom categories of either dropdown list or multi select dropdown list and define items in each category

React multiple select dropdown with dynamic search example; i will implement multi select dropdown with dynamic search in react js app using React-Select package.

How to Create Multi Select Dropdown with Dynamic Search in React

• Step 1 – Create React App
• Step 2 – Install Axios, Select and Bootstrap 4
• Step 3 – Create Multi-Select Component
• Step 4 – Import Multi Select Component in App.js

Step 1 – Create React App

Open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Axios, Select and Bootstrap 4

Execute the following command to install axios, select and boostrap 4 library into your react app:

npm install bootstrap --save

npm install react-select

npm install axios

Import bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div>
      <h2>How to Create Multi-Select Dropdown with Search in React</h2>
    </div>
  );
}
export default App;

Step 3 – Create Multi-Select Component

Go to src directory of your react js app and create form component named MultiSelectComponent.js. And add the following code into it:

import React, { Component } from 'react'
import axios from 'axios'
import Select from 'react-select'
class MultiSelectComponent extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      dropDownOpt : [],
      id: "",
      email: ''
    }
  }
 async renderData(){
    const API = await axios.get('https://jsonplaceholder.typicode.com/comments')
    const serverResponse = API.data
    const dropDownValue = serverResponse.map((response) => ({
      "value" : response.id,
      "label" : response.email
    }))
    this.setState(
      {
        dropDownOpt: dropDownValue
      }
    )
  }
  onChange(event){
   this.setState(
     {
       id: event.value, 
       email: event.label
      }
    )
  }
  componentDidMount(){
      this.renderData()
  }
  render() {
    return (
      <div className="App">
        <Select 
           options={this.state.dropDownOpt} 
           onChange={this.onChange.bind(this)}
           isMulti
        />
      </div>
    )
  }
}
export default MultiSelectComponent;

Step 4 – Import Multi Select Component in App.js

Import MultiSelectComponent.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import MultiSelectComponent from './MultiSelectComponent'
function App() {  
    
  return (  
    <div className="App">  
      <MultiSelectComponent />  
    </div>  
  );  
}  
export default App;

Conclusion

React Multi-Select Dropdown example; In this tutorial, you have learned from scratch how to implement multi-select dropdown with instant search in react application using the npm react-select package.

Recommended React JS Posts