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.

Checkout more articles on ReactJS

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

Implement react-select dropdown
Enable multi select and clearable features
Write logic to get selected by value for multi-select
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.

import Select from 'react-select';
...
...
<select ...="" ismulti="" isclearable="">

3. Write logic to get selected by value for multi-selectUse 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.
// set value for default selection
const [selectedValue, setSelectedValue] = useState([]);// handle onChange event of the dropdown
const handleChange = (e) => {
  setSelectedValue(Array.isArray(e) ? e.map(x => x.value) : []);
}</select> selectedValue.includes(obj.value))} // set selected values
  onChange={handleChange} // assign onChange function
  ...
  ...
/>

4. Output

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

App.js

import React, { useState } from 'react';
import Select from 'react-select';

function App() {
  const data = [
    {
      value: 1,
      label: "cerulean"
    },
    {
      value: 2,
      label: "fuchsia rose"
    },
    {
      value: 3,
      label: "true red"
    },
    {
      value: 4,
      label: "aqua sky"
    },
    {
      value: 5,
      label: "tigerlily"
    },
    {
      value: 6,
      label: "blue turquoise"
    }
  ];

  // set value for default selection
  const [selectedValue, setSelectedValue] = useState([]);

  // handle onChange event of the dropdown
  const handleChange = (e) => {
    setSelectedValue(Array.isArray(e) ? e.map(x => x.value) : []);
  }

  return (
    <div class="App">
      <h3>Get selected by only value for multi select - <a href="https://www.cluemediator.com">Clue Mediator</a></h3>

      <select class="dropdown" placeholder="Select Option" value="{data.filter(obj" ==""> selectedValue.includes(obj.value))} // set selected values
        options={data} // set list of the data
        onChange={handleChange} // assign onChange function
        isMulti
        isClearable
      />      {selectedValue &&
        Selected Value:  {JSON.stringify(selectedValue, null, 2)}
      }

  );
}export default App;

<!-- /wp:html --><!-- wp:image {"id":1851,"sizeSlug":"full"} -->
Output - How to get selected by only value for multi select in react-select - Clue Mediator
<!-- /wp:image --><!-- wp:html -->
That’s it for today.Thank you for reading. Happy Coding..!!Demo & Source Code
Github Repository
StackBlitz Project
<!-- /wp:html --></select></div>

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

Steps to get selected by value for multi-select

1. Implement react-select dropdown

2. Enable multi select and clearable features

4. Output

Categories

Tags