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
- Set environment variables in ReactJS
- image-content-in-reactjs" title="Validate Image Content in ReactJS">Validate Image Content in ReactJS
- autocomplete-in-reactjs" title="Google Place Autocomplete in ReactJS">Google Place Autocomplete in ReactJS
- scroll-to-the-top-of-the-page-after-render-in-reactjs" title="Scroll to the top of the page after render in ReactJS">Scroll to the top of the page after render in 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.
How to get selected by only value for multi select in react-select
https://youtu.be/mhLVjY09FOc
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.
2. 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.
<Select
value={data.filter(obj => obj.value === selectedValue)} // set selected value
...
...
/>
After updating the logic, your code should look like below.
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(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
Output - How to get selected by value in react-select - Clue Mediator
That's it for today.
Thank you for reading. Happy Coding!