How to create React dropdown select

2 min readMar 9, 2021

This tutorial help to create dropdown list using react 16. We will create select option and get selected item using reactjs. The drop-down menu is a menu that offers a list of options. The end user can select one of the options and to do operation based on selected item.

There are third-party library like react-select to create dropdown list, OR You can create a custom dropdown menu component in React.

Let’s create react select list using React-select library. This libs has features like search/filter items, ajax operation etc.

Normally, we can create html5 dropdown list as follow, I am using bootstrap libs for css.

React Select

React-select library has features dynamic search/filter, async option loading, accessibility, and fast render times. It has a flexible and beautiful Select Input control for ReactJS with multi-select, autocomplete, and ajax support.

It has the following features:

Flexible approach to data, with customizable functions
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 simple react app using npx-

npx create-react-app reaselect-poc

Now, go inside the project folder.

cd reaselect-poc

install React-Select v2

To install React-Select v2, Add the react-select package using the following command.

Install Bootstrap 4

install Bootstrap 4 using the following command.

yarn add bootstrap

# or

npm install bootstrap -save

Import the react-select module

Inside the src/App.js file, add the following code.

We have created an actions array that contains the data that needs to be displayed on the dropdown. There are following properties 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

You can control the following props by providing values for them. If you don’t, react-select will manage them 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)

Originally published at https://www.js-tutorials.com on March 9, 2021.