How to get selected by only value for multi select in react-select

Today we’ll show you how to get selected by only value for multi select in react-select. Previously we have written an article to get selected by value for a single selection but as per our reader’s request, we are going to write this article for multiple select options in react dropdown.

We will take an example where we use the isMulti attribute to enable the multiple selection options and isClearable attribute to clear value in react-select.

Steps to get selected by value for multi-select

  1. Implement react-select dropdown
  2. Enable multi select and clearable features
  3. Write logic to get selected by value for multi-select
  4. Output

1. Implement react-select dropdown

To create an example, first we’ll set up a simple react application that contains only a single react-select dropdown and label to display the selected values.

Refer an article to Implement dropdown in ReactJS.

2. Enable multi select and clearable features

Let’s enable the multi select and clearable features for react-select dropdown. For that we have to add isMulti & isClearable attributes in the dropdown component.

3. Write logic to get selected by value for multi-select

Use state to handle the selected value and here we are working with multi-select dropdown so the initial state value should be a blank array.

Create a handler for react-select onChange event where we’ll use only selected values in the form of the array and set it in the state variable.

Finally, we need to change the logic of the value attribute of the react-select dropdown and return the list of objects based on the selected values.

4. Output

Your file should look like this after combining all code together.

App.js

Output - How to get selected by only value for multi select in react-select - Clue Mediator
Output – How to get selected by only value for multi select in react-select – Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *