The process of building web applications has changed a lot. 10 years ago, web apps were much simpler than they are now. Back then, people did not pay much attention to UX. Functionality was more important back then.

Nowadays, companies pay much closer attention to UX. This article will be focused on input elements, specifically select elements.

Select is a type of input element. It is often used to let users select one of the many available options. Technically, the principles behind select element are simple. There’s a single <select> element and multiple <option> elements. This is also possible in React, but there’s a better way. react-select is a package that provides many functionalities of the select element in HTML.

The default export from the react-select is a custom component. It can save you a lot of time on implementing advanced features like multi-select.

The default use of custom Select element

When you import a custom element from react-select, you can use it straight away. You only need an array of options. This value is an array of objects with two properties: value and label. Values of these properties represent internal value and label of the option element.

The custom <Select> component takes an options prop. The value of this prop needs to be an array of objects that represent options.

This will create a simple select element with basic functionality and appearance. The only problem is that the element spans the entire screen. You can use inline styles or CSS classes to customize the appearance of select elements. You can use react-select to set default value.

onChange event handler

You need to define the onChange handler to store user’s choice in the state.

Use the useState() hook to define a state variable. It returns two values – the variable and the function to update it.

The onChange event handler should call the function that updates the state variable. Due to this, whenever user selects a new option, its value will be stored in the state. At any time, current choice of the user will be stored in the state.

This is useful when you want to work with user’s choice. For example, use it to conditionally render certain elements or conditionally style elements depending on user’s choice.

Other options

As we already said, react-select allows you to implement advanced features of the select element, like the ability to choose multiple options. Adding the Boolean isMulti prop will allow you to select multiple elements.

You can also pass a normal className attribute to customize react-select component’s appearance. You can also set the styles attribute of the custom <Select> element. As always, the value of this prop needs to be an object value.

You can use the makeAnimated() function to create animated select elements. Instance of calling this function should be passed to the components prop.