How to create React dropdown select

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.

Hey, I am Parvez Alam. A software developer since 2009. I am a programming addict. I love learning and sharing knowledge. https://www.phpflow.com/