15

I have a simple React component which gets an initial state:

this.state = {
  currentObject: {
    isYounger: false
  }
}

I then render a react-select with the default value of this.state.currentObject.isYounger:

    <Select
      name={"age"}
      value={this.state.currentObject.isYounger}
      onChange={newValue => this.addIsYoungerValue(newValue)}
      options={isYoungerOptions}
    />

For some reason, the value is not set. Why is this?

Codesandbox

Version:

"react-select": "^2.4.2",

a7dc
  • 3,323
  • 7
  • 32
  • 50
  • 2
    Can you please specify the version you are using of react-select? – Dhara Vihol Apr 01 '19 at 17:21
  • Thanks @DharaVihol I have updated the OP with the version – a7dc Apr 01 '19 at 17:26
  • 1
    It seems like you are having issue because you are trying to set `Boolean` value. Can you try it once with String value, so that we can understand the root cause and it will help to resolve the issue. @A7DC – Dhara Vihol Apr 01 '19 at 17:36
  • Thanks @DharaVihol, I've updated to use string values instead of boolean, but that does nothing. I've updated the OP with an editable sandbox also – a7dc Apr 01 '19 at 17:44
  • 1
    You can also provide `defaultValue` prop. As described here. [https://github.com/JedWatson/react-select](https://github.com/JedWatson/react-select) – Dhara Vihol Apr 01 '19 at 17:45
  • I've already tried that by doing `defaultValue={isYoungerOptions[0].value}` but it does not work – a7dc Apr 01 '19 at 17:50
  • Please check the answer and as well as sandbox changes @A7DC – Dhara Vihol Apr 01 '19 at 17:55

3 Answers3

12

Here the issue is not with state selection, the actual issue is that the label is not getting displayed.

So, as per your addIsYoungerValue function you are setting the value of this.state.currentObject.isYounger to whole object. i.e. { value: true, label: "Younger" }. So, the issue can be solved by changing the value of initial state by below.

this.state = {
      array: [],
      currentObject: {
        isYounger: { value: true, label: "Younger" }
      }
    };

And hurrey, the default value label will be shown..

Dhara Vihol
  • 602
  • 5
  • 26
9

Your defaultValue or value must be objects. In your case like this:

defaultValue={isYoungerOptions[0]}

or 

this.state = {
   array: [],
   currentObject: {
     isYounger: { value: "true", label: "Younger" }
   }
 };

Here an live example.

Laura
  • 8,100
  • 4
  • 40
  • 50
8

There is an alternate way to use value as your defaultValue. In my case I have used "id" and "industry" instead of "label" and "value"

this.state = {
     interested_industries: [{id:"ANY", industry:"ANY"}]
}

And in Select component:-

<Select 
    name="interested_industries"
    options={industries}
    value={interested_industries}
    getOptionLabel={ x => x.id}
    getOptionValue={ x => x.industry}
    onChange={this.handleSelect}
    isMulti
/>
Tron
  • 566
  • 6
  • 7