React Select defaultValue is set but doesn't appear

Question

I've tried even manually setting the default values like in the documentation but no dice. I'm not sure if it's a styling issue or what. So below I posted what I have along with a screenshot.

  <Select
        components={animatedComponents}
        getOptionLabel={convertToLabel}
        getOptionValue={option => option.resource_name}
        isMulti
        onChange={changeEvent}
        options={users}
        theme={theme => ({
          ...theme,
          borderRadius: 0
        })}
        defaultValue={(props.value || []).map(convertToValue)}
        value={(props.value || []).map(convertToValue)}
      />

convertToValue function

  const convertToValue = props => {
    return {
      label: `${props.name} ${props.family_name}`,
      value: props.resource_name
    };
  };

convertToLabel function

  const convertToLabel = props => {
    return `${props.name} ${props.family_name}`;
  };

changeEvent function

  const changeEvent = (selectedOption, i) => {
    let option = {
      name: "reviewers",
      value: selectedOption
    };
    update({ target: option });
  };

users & props objects

users: 
  [
    {
      resource_name: "facebook_user1",
      name: "Joe",
      family_name: "Dirt"
    },
    {
      resource_name: "facebook_user2",
      name: "Trident",
      family_name: "White"
    }
  ]

props:
  {
    field: "placeholder",
    fieldType: "placeholderType"
    value:[
            {
              resource_name: "facebook_user1",
              name: "Joe",
              family_name: "Dirt"
            },
            {
              resource_name: "facebook_user2",
              name: "Trident",
              family_name: "White"
            }
          ]
  }  

What I see on my screen.

Answer 1

It is extremely difficult to tell exactly what your issue is, without seeing the actual JSX of your select render. Here are a few issues I see, looking at your question, and some hard guesses at what might be happening.

• You should show us the full JSX render of your Select implementation
• You never show us what your defaultValue prop looks like, but remember that value is expected to be equal to one of your option s, not just an option 'value'
• Your label and option getter methods signature should be getOptionLabel = (option) => string and getOptionValue = (option) => string . You've used props , which might conflict with parent scope, in your instance.
• You probably want your convertToValue method signature to line up with those as well.
• Your onChange event method signature doesn't line up with React-Select, and may be causing you pain. See my answer to this recent question for help on this.