javascriptarraysreactjsreact-select

Setting a default value with react-select not working


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",


Solution

  • 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..