How to get selected by only value in react-select
Today we will show you how to get selected by only value in react-select dropdown. Most of the developers get confused about the display selected value in react-select by passing only value. So today we will share the solution with you.
How to set & get only value string in react-select’s state, react js dropdown selected value, react select onchange get selected value, react-select set selected option, how to set default value in react select, how to set value selected in dropdown, react select get selected value, Issue: react select not showing selected value, how to get select option value in react, react-select get value on change.
Checkout more articles on ReactJS
While you are working with react-select dropdown package then you need to get selected dropdown by passing the value only. But by default react-select needs the whole object to get selected. So in this article we will show you that react-select gets selected by only value.
If you are looking for similar functionality in Multi Select dropdown then you should check out the article below.
Steps to get selected by value in react-select
1. Implement react-select dropdown
First, Try to implement react-select dropdown in ReactJS project. If you don’t know how to do it then refer to the link below.
Implement dropdown in ReactJS2. Update logic in value selection
Now, it’s time to change the minor logic for the value attribute and it will work for you. Check the code below for it.
1 2 3 4 5 | <Select value={data.filter(obj => obj.value === selectedValue)} // set selected value ... ... /> |
After updating the logic, your code should look like below.
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 | 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(3); // handle onChange event of the dropdown const handleChange = e => { setSelectedValue(e.value); } return ( <div className="App"> <a href="https://www.cluemediator.com">Clue Mediator</a><br /><br /> <Select placeholder="Select Option" value={data.find(obj => obj.value === selectedValue)} // set selected value options={data} // set list of the data onChange={handleChange} // assign onChange function /> {selectedValue && <div style={{ marginTop: 20, lineHeight: '25px' }}> <div><b>Selected Value: </b> {selectedValue}</div> </div>} </div> ); } export default App; |
3. Output
That’s it for today.
Thank you for reading. Happy Coding!
What about when the select is Multi?
Hello Jim,
This solution is only for a single selection. We will write a separate article for the multi-select dropdown and publish it within two days.
Thank you for drawing our attention.
Subscribe us for weekly updates or like and follow us for regular updates.
Happy Coding..!!
Hi Jim,
Here is the answer of your question.
How to get selected by only value for multi select in react-select
Let us know if you still have any queries.
This is great! Would love to see Select Async and how to style the form. Thank you for this tutorial. There is not much out there on React-Select!
Hey Andre,
We will publish an article to create an Async component with react select.
Stay tuned for updates.
Thank you!
Check out your requested article: React-Select Async Dropdown using Search API
Thank you! I’ve spent one hour trying to understand how to make it work and finally have found your post 🙂
We are glad it helped!
Subscribe us for weekly updates or like and follow us for regular updates.
Thanks a lot, your post is useful
THX!!!!!!!!!!!!!!!!!!!!!