import React, { Component } from ‘react’;
import Select from ‘react-select’;
class MultiSelectDropdown extends Component {
constructor(props) {
super(props);
this.state = {
selectedOption: null,
};
}
handleChange = (selectedOption) => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
}
render() {
const { selectedOption } = this.state;
const options = [
{ value: ‘chocolate’, label: ‘Chocolate’ },
{ value: ‘strawberry’, label: ‘Strawberry’ },
{ value: ‘vanilla’, label: ‘Vanilla’ }
];
return (
);
}
}
export default MultiSelectDropdown;
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.
