defaultValue doesn't update after props change

[Manubi]

Hi!
I have problems with react-select. I am setting the defaultValue, but as props change the defaultValue doesn't change to the correct state.

The problem is react-select has the old props data. It renders, but doesn't update if the new props are available. It should change from Röteln to Staupe.

Any hints?
Thanks!

[ebonow]

Greetings @Manubi ,

defaultValue is only used when the component is first mounted. This is similar to setting the default state for a class component in the constructor or setting a default for a react useState hook.

This can be frustrating when say for example you are waiting for data from an api to know what the defaultValue should be, and it does mean that it would need to be made a controlled input where you would want to set the value instead of defaultValue, which also means that you would need to update the controlled value with the onChange prop.

The following should work for your use-case:

const MySelect = props => {
  const [ value, setValue ] = useState(props.value || props.defaultValue);
  
const onChange = selected => {
    setValue(selected);
    props.onChange && props.onChange(selected);
  }
  
 return <Select {...props} value={value} onChange={onChange} />
}

[Manubi]

Thanks for the info! Would be great if you would mention it in the docs. I just spend almost a day to get it working with react-hook-form as uncontrolled component...