"defaultValue" in react-select does not select option in dropdown but "value" select the option in dropdown

Question

I'm learning react and have come across react-select behaviour which i'm unable to understand.

I've a react-select component whose values are being fetched from an api call. If I use defaultValue then it doesn't select that value from dropdown but if i use value then it selects value for the dropdown.

I'm just confused why defaultValue is not working.

<Select
  key={`dropdown`}
  options={options}
  onChange={onSelect}
  defaultValue={defaultValue} />

where 'options' are being passed as props from other component where they are being fetched from an api call.

defaultValue is also being passed as prop and have structure like this:

defaultValue = {
  label: `Test label`,
  value: `Test value`
}

But now if I change the select component like

<Select
  key={`dropdown`}
  options={options}
  onChange={onSelect}
  value={defaultValue} />

Now it works fine.

So what is the difference value and defaultValue. Why the defaultValue is not able to set the option in react select.

i imagine the default value with be 'Test value' instead of an object — Joe Warner
– Joe Warner, Commented Mar 8, 2019 at 15:27
Try waiting to render your select element until your options have been fetched from the API. defaultValue may only select the option if it exists on the first render. — Wex
– Wex, Commented Mar 8, 2019 at 16:18
@Wex what should i use to wait for select to render like some sort of sleep statement ? sorry for stupid question but have never done anything like that in react. — lazydev
– lazydev, Commented Mar 9, 2019 at 16:54
Declarative style views are a pretty dramatic shift from their traditional imperative counterpart. Your application state drives the view, which should make your code more predictable and easier to debug. — Wex
– Wex, Commented Mar 9, 2019 at 19:35

Wex · Accepted Answer · 2019-03-09 19:31:13Z

1

You should delay rendering your <Select> element until your API has returned the options data. Here's one approach that may work for you:

/* options is null/undefined until API sets value to an array */
renderSelect(options) {
  if (options == null) return null;

  return <Select
    key={`dropdown`}
    options={options}
    onChange={onSelect}
    value={defaultValue} />
}

answered Mar 9, 2019 at 19:31

Wex

15.7k10 gold badges68 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lazydev Over a year ago

Thanks for the answer.

Collectives™ on Stack Overflow

"defaultValue" in react-select does not select option in dropdown but "value" select the option in dropdown

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related