How to use Select Dropdown using React-select in React Apps

React Select Dropdown example; In this tutorial, i will provide you complete guide on how to select dropdown in react application using the npm react-select package.

The react-select library provides hassle-free multi-select, autocomplete, and AJAX support. And you can go into the cool functionality that react-select v2 has to offer, as well as get on a launchpad to introduce us to react-select v2 and how to get started with it.

React Dropdown Select Tutorial with React-select example; i will create a simple form and integrate select dropdown in react app using React-Select library.

React Dropdown Select Example With React-Select

• Step 1 – Create React App
• Step 2 – Install react-Select and Bootstrap 4
• Step 3 – Create Select Dropdown Component
• Step 4 – Add Component in App.js

Step 1 – Create React App

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 4

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

Import 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

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>
    );
  }
}
export default SelectDropDownComponent;

Step 4 – Add Component in App.js

Import SelectDropDownComponent.jsfile 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.

Recommended React JS Posts