React - How to set default value in react-select
15,450
Here default value we are finding out in organization options and pass it as value in Select:
import React from 'react';
import Select from 'react-select';
export default class App extends React.Component {
organizationOptions = () => {
return [
{value: "62", label: "Dfdf"},
{value: "128", label: "Dfdfdsf"},
{value: "151", label: "Fgfdgdfh"},
{value: "121", label: "Hhhfas"},
{value: "55", label: "My Sensor_56"},
{value: "13", label: "New Org"},
{value: "44", label: "Org 2"},
{value: "148", label: "Testing App"}
]
}
render() {
const selectedValue = "55"
return (
<Select
value={this.organizationOptions().find(op => {
return op.value === selectedValue
})}
onChange={this.handleChange}
options={this.organizationOptions()}
/>
);
}
}
Comments
-
Vishal almost 2 years
I used react-select in my application for showing select box. below is code of my select.
<Select className="custom-form-control mb-2" name="organization_options" options={this.organizationOptions()} placeholder={false} onChange={this.handleChange.bind(this)} value={selectedValue === "" ? this.organizationOptions()[0] : selectedValue} />
Below are the options i already have in select box
0: {value: "62", label: "Dfdf"} 1: {value: "128", label: "Dfdfdsf"} 2: {value: "151", label: "Fgfdgdfh"} 3: {value: "121", label: "Hhhfas"} 4: {value: "55", label: "My Sensor_56"} 5: {value: "13", label: "New Org"} 6: {value: "44", label: "Org 2"} 7: {value: "148", label: "Testing App"}
I have the value from query string like value="55", if the value is present i want to show that selected value in select box .
I tried in 2 different ways which are shown as below code ,
1)
selectedValue='55' defaultValue={this.organizationOptions().find(op => { return op.value === selectedValue })}
2
defaultValue={{value: "55", label: "My Sensor_56"}}
But no one works, Can somebody tell me How can i set defaultV alue if already have or don't show default value if i don't have selected value ?