How to set value on version 2?
See original GitHub issueHi 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.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:15
Top Results From Across the Web
set-value - npm
Latest version: 4.1.0, last published: a year ago. Start using set-value in your project by running `npm i set-value`.
Read more >How to set value for the multi-select field using netsuite ...
If using a client script setting multiselect values is simple. ... Then on my multiselect field of type 'Employee' I set the values...
Read more >Versioned Key/Value Secrets Engine | Vault
Step 1: Check the KV secrets engine version · Step 2: Write secrets · Step 3: Retrieve a specific version of secret ·...
Read more >Compose file version 2 reference - Docker Documentation
These topics describe version 2 of the Compose file format. ... You can use environment variables in configuration values with a Bash-like ${VARIABLE} ......
Read more >Solved: Set Value of Field on Submit to Concat Values from...
Set Value of Field on Submit to Concat Values from a 2 Different Fields + Text String. Reply. Topic Options ... In response...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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
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 fieldselectedOption
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 specifyoptions.find
every single time I want a regular ol’ select component.