How to Create React Dropdown Select

This tutorial will show you how to create a dropdown list using react 16. Using reactjs, we will create a select option and retrieve the selected item.

A drop-down menu is a menu with a list of options. The end-user can choose one of the options and perform an operation based on the item chosen.

To create a dropdown list, you can use a third-party library such as react-select, or you can create a custom dropdown menu component in React.

I have already shared tutorial Async React-Select Dropdown using Rest API and React Select Example Using Material UI.

Video Tutorial

If you are more comfortable in watching a video that explains about How to Create React Dropdown Select, then you should watch this video tutorial.

Checkout Other tutorials:

• React Select Example Using Material UI
• Async React-Select Dropdown using Rest API

React Dropdown List

Let’s make a react select list with the React-select library. This library includes features such as search/filter items, ajax operation, and so on.

HTML 5 Dropdown list

Normally, we can create an html5 dropdown list as shown below, with CSS styling provided by bootstrap libs.

<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </a>

  <div class="dropdown-menu" aria-labelledby="actions">
    <a class="dropdown-item" href="#">Add</a>
    <a class="dropdown-item" href="#">Edit</a>
    <a class="dropdown-item" href="#">Delete</a>
  </div>
</div>

React Select

React-select library has dynamic search/filtering, async option loading, accessibility, and quick render times. It includes a flexible and beautiful Select Input control for ReactJS that supports multi-select, autocomplete, and ajax.

It has the following features:

• Flexible approach to data, with functions that can be customised.
• Extensible styling API with emotion.
• Component Injection API for complete control over the UI behavior.
• Controllable state props and modular architecture.
• Long-requested features like option groups, portal support, animation, and more.

Install React and other libraries

Let’s create a simple react app using npx–

npx create-react-app reaselect-poc

Now, navigate to the project folder.

cd reaselect-poc

install React-Select v2

To install React-Select v2, use the following command to add the react-select package.

yarn add react-select

# or

npm install react-select --save

Install Bootstrap 4

install Bootstrap 4 using the following command.

yarn add bootstrap

# or

npm install bootstrap --save

Import the react-select module

Add the following code to the src/App.js file.

// App.js
import React from 'react';
import Select from 'react-select';
import 'bootstrap/dist/css/bootstrap.min.css';

const actions = [
  { label: "Add", value: 1 },
  { label: "Edit", value: 2 },
  { label: "Delete", value: 3 }
];

const App = () => (
  <div className="container">
    <div className="row">
      <div className="col-md-4"></div>
      <div className="col-md-4">
        <Select options={ actions } />
      </div>
      <div className="col-md-4"></div>
    </div>
  </div>
);

export default App

We’ve made an actions array with the data that needs to be displayed on the dropdown. The properties listed below are available.

• autoFocus – focus the control when it mounts
• className – apply a className to the control
• classNamePrefix – apply classNames to inner elements with the given prefix
• isDisabled – disable the control
• isMulti – allow the user to select multiple values
• isSearchable – allow the user to search for matching options
• name – generate an HTML input with this name, containing the current value
• onChange – subscribe to change events
• options – specify the options the user can select from
• placeholder – change the text displayed when no option is selected
• value – control the current value

React-select exposes two public methods:

• focus() – focus the control programmatically
• blur() – blur the control programmatically

By providing values for the following props, you can control them. If you don’t, react-select will handle it for you.

• value / onChange – specify the current value of the control
• menuIsOpen / onMenuOpen / onMenuClose – control whether the menu is open
• inputValue / onInputChange – control the value of the search input (changing this will update the available options)