How to set value on version 2?

Hi guys, i know this is a dumb question. But i was wondering why is chocolate not getting selected with the following code?

import React from 'react';
import Select from 'react-select';

const options = [
  {value: 'chocolate', label: 'Chocolate'},
  {value: 'strawberry', label: 'Strawberry'},
  {value: 'vanilla', label: 'Vanilla'},
];

export default props => {
  return <Select {...props} options={options} value="chocolate" />;
};

It works if set the value to {value: 'chocolate', label: 'Chocolate'},. If this is the case i always have to know the label in order for me to set the value.

However my api only returns ‘chocolate’ and i do not want to save {value: 'chocolate', label: 'Chocolate'}, on the database.

[kaareal]

Was thinking the same took me a bit. From what I can tell you have to set the value to the object of the options you want to select, I suspect it filtering by reference

export default props => {
  return <Select {...props} options={options} value={options.find(option => option.value === 'chocolate')} />;
};

[B-Reif]

I was tripped up on this too, and I didn’t see anything about it in the upgrade guide. It would be nice to be aware of this API change while migrating from v1 to v2.

Part of what’s confusing about this is that the prop itself is called value, so I expect to give it a value. I would call this field selectedOption or something else that reflects the field’s expectation of an entire option object.

I’m still unclear about why this API was changed at all. I would prefer if the component, by default, implemented a basic comparison function ((o, v) => o.value === v) and then allowed the consumer to customize the comparison with their own selector function. It’s a (relatively small) nuisance to specify options.find every single time I want a regular ol’ select component.