React-Select with custom label and custom search

Lahiru Ranasinghe
Feb 14 · 2 min read

It is hard to find a select with all the requirements you need it to do. React-select was the winner in that search for me with all the features that it provides.

However, I had a bit of a struggle to implement the custom options in React-select, such as using the custom label from the data object where it uses value key and label key from the data set. Let’s say you have a result from the API without ‘value’ and ‘label’ keys.

Adding custom labels

In react-select Menu Items(dropdown) you want to show first name and last name from the data set. It uses the “getOptionLabel" prop.

getOptionLabel={option =>`${option.first_name} ${option.last_name}`}

Adding custom value to return in select

To set which value to return when user selects an option from the menu items. It uses the “getOptionValue” prop

getOptionValue={option => `${option}`}

Adding custom search

If you want to use the whole object or a custom search logic to implement. It uses the “filterOption" prop.

filterOption={this.customFilter}

I wanted to search from the first name, last name and the user gender. (for the example)

Seems out it’s pretty easy.

Full code here,

I hope this was helpful for you.

A Full-stack developer with experience in MERN (MongoDB, Express.js, Reactjs and Node) stack and AngularJS.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade