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.
