Solvedreact select How to set value on version 2?
✔️Accepted Answer
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')} />;
};
Other Answers:
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.
Hi guys, i know this is a dumb question. But i was wondering why is chocolate not getting selected with the following code?
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.