React - How to set default value in react-select

Question

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 ?

`defaultValue` should be `55` only in your case. As defaultValue is selected option. — Pardeep Dhingra, Sep 21 '18 at 04:56
@PardeepDhingra I already tried this like defaultValue="55", its not working . react-select taking whole object as option, like this `{value: "55", label: "My Sensor_56"}` . — Vishal, Sep 21 '18 at 04:58
I tried an example with react-select `value={{value: "55", label: "My Sensor_56"}}` working well for me, — Pardeep Dhingra, Sep 21 '18 at 05:19
@Damien did you even check my question, i used different library https://github.com/JedWatson/react-select and the question you flaged duplicate its pure in react. don't flag until you have proper knowledge about it. — Vishal, Sep 21 '18 at 05:58

Pardeep Dhingra · Accepted Answer · 2018-09-21T05:38:32.680

6

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()}
      />
    );
  }
}

edited Sep 21 '18 at 05:38

answered Sep 21 '18 at 05:24

Pardeep Dhingra

3,916
7
30
56

is it your answer ? like as you mentioned in answer its already working . i want to know how to set default value – Vishal Sep 21 '18 at 05:30
This is the example working for me . to set default value `value={ this.organizationOptions()[1] }` – Pardeep Dhingra Sep 21 '18 at 05:30
Welcome @Vishal – Pardeep Dhingra Sep 21 '18 at 05:39
2

@PardeepDhingra what if you want to set the default value as what you have typed in and it's not present in the option array . How do you go about that? – EI-01 Oct 04 '18 at 20:26
Does this set the selected label as well? – geobudex Oct 02 '20 at 04:24
How do you set a defaultValue if the selectedValue = ["1","2"] – Ritankar Bhattacharjee Dec 30 '22 at 07:33

React - How to set default value in react-select

1 Answers1

Linked