Solvedreact select 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.

16 Answers

✔️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.

Related Issues:

187
react select onChange returns the selected value, not the complete event
@ashnur I'm going to address your comment for the benefit of anyone else who is seeking to understan...
116
react select React Select [v2] focus outline color
@Iulia-Soimaru you can style the borderColor via props like: Hi i want to change the focus outline c...
97
react select How to force reload of options?
This works for me: Example working: https://github.com/helmarjunior/react-hooks-select-async ...
64
react select v3 upgrade guide
Would be awesome if you could update typings for this too Currently don't believe I can import like ...
42
react select [V2] Warning: Prop id did not match.
I think it's instanceId prop not id prop? Getting this error in console Warning: Prop id did not mat...
33
react select How to set value on version 2?
Was thinking the same took me a bit From what I can tell you have to set the value to the object of ...
25
react select How to keep value in textbox search after choosing it
@DaveOdden (and others) For V2- I was able to enable editable text by setting the inputValue prop on...
25
react select Warnings: componentWillReceiveProps in strict mode, Legacy context API, findDOMNode is deprecated
For anyone else going insane over this you can disable those warnings (and other actually helpful on...
23
react select Add isOpen Prop
isOpen or alwaysOpen is really important property Sometimes we need it We all can make a fork to add...
15
react select Select doesn't render isomorphically
Use instanceId: <Select instanceId=unique name ...> Hello If I render this server side first and the...
11
react select Uncaught TypeError: Object(...) is not a function
Sorry I meant to follow up here when we resolved this over email The issue was with the Webpack conf...
10
react select textbox input clears after selecting a value from the options using redux and onInputChange returns empty even if returning the value.
I had to make the following changes to get our search working as expected: Using redux and react-sel...
9
react select Select in IOS doesn't work
Thanks for your reply I fixed it - in my case 'fastclick' lib causes that issue ...
9
react select Cursor lagging input
I also experience some sort of this bug in IE11 When you type relatively fast the input jumps back a...
8
react select Critical accessibility issues: aria roles and aria-label
For anyone else who stumbles upon this thread and is looking for a temporary fix.. ...
6
react select Styles are not applied to react-select inside a shadow-DOM component
@JedWatson we add additional check and now it works Can you update your package? ...
5
react select Multi labelKey or custom labelKey
Maybe labelKey can receive a function: That would be awesome! Hello ...
5
react select Feature Request: Allow for sorting options in filterOptions prop
Meanwhile i had to do something like this: Hope it helps someone In v1 overriding the standard filte...
5
react select How to specify labelkey and valuekey in version 2.1.1
You forgot to actually ask your question (which should really go to StackOverflow in this scenario) ...