react-select wont display default value

Question

I am trying to display a default value in react-select based on an array of values. I have confirmed that the value is equal to the value I am comparing against. I have looked through this post, this post, this post, this post, this post and this post. Despite the similarities, the defaultValue will still not set. I have confirmed by loggin the result of my comparators that they are the same, both in uppercase, both strings.

My Select element is

   <Select
    name="disposition"
    classNamePrefix="select"
    options={statusOptions}
    ref={selectInputRefPlan}
    styles={singleStylesRowComp}
    defaultValue={statusOptions.filter(
      ({ value }) => value.value === lead.disposition
    )}
  />

and my array is

 const statusOptions = [
    { value: "HOT", label: i18n._(t`HOT`) },
    { value: "WIP", label: i18n._(t`WIP`) },
    { value: "LOST", label: i18n._(t`LOST`) },
    { value: "DNC", label: i18n._(t`DNC`) },
    { value: "WON", label: i18n._(t`WON`) },
    { value: "NEW", label: i18n._(t`NEW`) },
  ];

I am testing against the value and not the label, so translation issues won't arise. when i log the response, value.value === 'NEW' and lead.disposition === 'NEW', however, the defaultValue will not set. I have also tried the prop value, as well as having read through the 6 or 7 similar posts. Is there a simple syntax error? or something else I am missing?

Here is a sandbox link that demonstrates the issue

is there a chance that because the default value is only what it starts as, then it cannot be reassigned after mounting of the select? — Alexander Hemming, Oct 29 '20 at 22:19
I had a similar thought, but thats why i tried using the value prop as well... thoughts? im putting together a codesandbox right now — IWI, Oct 29 '20 at 22:21
@AlexanderHemming there is now a sandbox https://codesandbox.io/s/lively-wind-s3mtj?file=/index.js — IWI, Oct 29 '20 at 22:28
would go with value prop for more controlled select components. All i can think of otherwise is how lead.disposition is made — Alexander Hemming, Oct 29 '20 at 22:28
Well the sandbox works as expected. What is the eror you are getting? — Domino987, Oct 29 '20 at 22:49
@Domino987the sandbox is not displaying the value given to the select. how is it working as expected? is there something im not seeing? — IWI, Oct 29 '20 at 23:02

score 2 · Accepted Answer · answered Oct 29 '20 at 22:47

The error is in your filter function. You decompose value, and then access value.value. This is undefined.

Instead, take the option argument without decomposition, and access option.value.

<Select
  name="disposition"
  classNamePrefix="select"
  options={statusOptions}
  ref={selectInputRefPlan}
  styles={singleStylesRowComp}
  defaultValue={statusOptions.filter((option) => option.value === lead.disposition)}
/>;

react-select wont display default value

1 Answers1