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.
1 2 3 4 5 6 7 8 | import Select from 'react-select'; ... ... <Select ... isMulti isClearable /> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // 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 value={data.filter(obj => 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 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 className="App"> <h3>Get selected by only value for multi select - <a href="https://www.cluemediator.com">Clue Mediator</a></h3> <Select className="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 && <div style={{ marginTop: 20, lineHeight: '25px' }}> <div><b>Selected Value: </b> {JSON.stringify(selectedValue, null, 2)}</div> </div>} </div> ); } export default App; |
That’s it for today.
Thank you for reading. Happy Coding..!!
How can send the selected values as an axios post request?
Hi Ayushi,
You can store the comma-separated values in the database as below.
axios.post('/user', {lang: '2,3,5'
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
How can we use the selected values to display a related message. For e.g , i have values as cough, pain and dizzy. how do i make it so that when these values are selected , message is displayed saying , you have common cold?
You have to do some checks in the
onChangemethod of the dropdown list and depending on the condition you can set the state variable to display text.If you have Stackblitz source code then share it with us so we can provide further guidance.
https://stackblitz.com/edit/react-zwxn7b?file=src/App.js
Set the category in the list and use it for display text.
const data = [{ label: "Fever", value: 1, category: "cat 1" },
{ label: "Head-ache", value: 2, category: "cat 2" },
{ label: "Runny-nose", value: 3, category: "cat 1" },
{ label: "Ear-pain", value: 4, category: "cat 1" },
{ label: "Body-pain", value: 5, category: "cat 2" },
{ label: "Cough", value: 6, category: "cat 1" }
];
const Diagnose = e => {
getValue([...new Set(e.map(x => x.category))]);
};
thanks bro
Glad it helped!
Hmmm, Very easy and great article.. Thanks a lot.
Glad it helped!