react-select wont display default value

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

1 answer

  • answered 2020-10-29 22:47 Benjamin

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