React Multi Select Dropdown with Dynamic Search Example

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

Whenever you create a form in any react js app. And want that someone can add multiple select in form fields and also implement search filter in it. So, this tutorial will guide you step by step on how to implement multi select dropdown with dynamic search in react js app using React-Select package to add multiple select drop-downs with live search in react.

How to Create Multi-Select Dropdown with Search in React

Just follow the following steps and how to multi-select dropdown with search in react:

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

Step 1 – Create React App

In this step, 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

In this step, 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

Add 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

In this step, visit src directory of your react js app and create form component named SelectComponent.js. And add the following code into it:

import React, { Component } from 'react'

import axios from 'axios'

import Select from 'react-select'

class SelectComponent 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>
    )
  }
}

Step 4 – Add Component in App.js

In this step, you need to add SelectComponent.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import SelectComponent from './SelectComponent'

function App() {  
    
  return (  
    <div className="App">  
      <SelectComponent />  
    </div>  
  );  
}  

export default App;

Conclusion

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

AuthorAdmin

Leave a Reply Cancel reply