React Dropdown Select Example using React-select

In this example tutorial, you will learn from scratch how to select dropdown in react application using the npm react-select package.

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.

Recommended React JS Posts