React Dropdown Select Example using React-select

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.

Recommended React JS Posts