React Dynamic Multi Select Dropdown Search Example

React Dynamic Multi Select Dropdown Search 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.

How to Create Multi-Select Dropdown with Search in React

Steps to create multi-select dropdown with dynamic search:

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

In this step, execute the following command to install Axios, select and bootstrap 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.

Recommended React JS Posts

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *