React Multi Select Dropdown with Dynamic Search Tutorial

React Multi-Select Dropdown tutorial; In this tutorial, you will step by step ascertain how to integrate multi-select dropdown with instant search in react application using the npm react-select package from the absolute beginning.

React is a top-notch framework with impeccable development support; this ecosystem is not for faint-hearted developers. We are about to use the React-Select package to add multiple select drop-downs with live search in react. This plugin offers Select control for React JS application,

It brings an entirely innovative approach for generating powerful React.js components that work out of the box and is highly customizable. Here are the compendium of features that you can try with this unique library.

  • Extensible styling API with emotion
  • Controllable state props and modular architecture
  • Flexible approach to data, with customizable functions
  • Component Injection API for complete control over the UI behavior
  • Long-requested features like option groups, portal support, animation, and more

How to Create Select Dropdown with Search in React

  • Step 1: Install New React Project
  • Step 2: Add React-Select Package
  • Step 3: Install Axios in React
  • Step 4: Implement Single Select Dropdown
  • Step 5: Integrate Dynamic Multi Select Dropdown
  • Step 6: Start React App

Install New React Project

Commencement of the tutorial begins with installing a new react app, type the command equally important execute the command from the terminal:

npx create-react-app react-multiselect-demo

Next, enter into the app:

cd react-multiselect-demo

Add React-Select Package

This segment of the tutorial instructs on installing the react select package into the react app, on top of that you may perform the following command:

npm install react-select

Install Axios in React

In this section, follow the given command to add the Axios package into the react app, Its a promise-based HTTP client for the browsers by the same token for node-based apps.

npm install axios

Implement Single Select Dropdown

In this section, we implement a single select dropdown in react; a user can also get the suggestions as they start typing in the select dropdown input text field.

You will also learn how to use the REST API even more Axios to render the data and bind into the select dropdown; let us open the src/App.js file and replace it with the current code.

import React, { Component } from 'react'

import axios from 'axios'
import Select from 'react-select'


export default class App extends 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)}
        />
      </div>
    )
  }
}

Integrate Dynamic Multi Select Dropdown

In the previous step, we revealed how to add a select dropdown in react; what if you need to choose multiple options from the dropdown list. We need to keep everything intact, the only step we have to take is to add is isMulti property to the Select directive.

Open and update the src/App.js file:

import React, { Component } from 'react'

import axios from 'axios'
import Select from 'react-select'


export default class App extends 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>
    )
  }
}

Start React App

In the final step, you need to invoke the react development server, use the npm start command from the command prompt to start react application.

npm start

Open browser, type the url, and test the react select app.

http://localhost:3000

React Multi Select Dropdown

Conclusion

The React select dropdown with live search example tutorial is done; we used the Axios library to fetch the data dynamically from the json server and display the data into the select dropdown. Creating custom multi-select in react has never been easy; nevertheless, the react-select plugin made our work so easy.