import React, { Component } from ‘react’;
import Select from ‘react-select’;
class DropdownSelect extends Component {
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 DropdownSelect;
React Select Dropdown example; In this example tutorial, you will learn from scratch how to select dropdown in react application using the npm react-select package.
Whenever you create a form in any react js app. And want to add single select dropdown field in for. So, this tutorial will guide you step by step on how to add single select dropdown in react js app using React-Select library.
How to Create Dropdown Select React.js
Just follow the following steps and how to implement select dropdown using react-select library in react js app:
- Step 1 – Create React App
- Step 2 – Install react-Select and Bootstrap
- Step 3 – Create Select Dropdown 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 react-Select and Bootstrap
In this step, execute the following command to install react-select and boostrap 4 library into your react app:
npm install bootstrap --save npm install react-select
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 Select Dropdown in React js app Example</h2>
</div>
);
}
export default App;
Step 3 – Create Select Dropdown Component
In this step, visit src directory of your react js app and create form component named SelectDropDownComponent.js. And add the following code into it:
import React, { Component } from 'react';
import Select from 'react-select';
const Countries = [
{ label: "Albania", value: 355 },
{ label: "Argentina", value: 54 },
{ label: "Austria", value: 43 },
{ label: "Cocos Islands", value: 61 },
{ label: "Kuwait", value: 965 },
{ label: "Sweden", value: 46 },
{ label: "Venezuela", value: 58 }
];
class SelectDropDownComponent extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-md-3"></div>
<div className="col-md-6">
<Select options={Countries} />
</div>
<div className="col-md-4"></div>
</div>
</div>
);
}
}
Step 4 – Add Component in App.js
In this step, you need to add SelectDropDownComponent.js file in src/App.js file:
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import SelectDropDownComponent from './SelectDropDownComponent'
function App() {
return (
<div className="App">
<SelectDropDownComponent />
</div>
);
}
export default App;
Conclusion
React -Select Dropdown example; In this example tutorial, you have learned from scratch how to implement select dropdown with option in react application using the npm react-select package.
