React-select: How to set value on version 2?

[johndavedecano]

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.

[apwat56102]

{value: 'chocolate', label: 'Chocolate'} data me {code: 'chocolate', name: 'Chocolate'}
how to ? change key option ?

[apwat56102]

**{value: 'chocolate', label: 'Chocolate'} data me {code: 'chocolate', name: 'Chocolate'}

how to ? change key option ?**

[alexmortensenhq]

This needs to be documented more clearly.

[jossmac]

@apwat56102 I think I understand; for that data shape you would do something like:

<Select
  getOptionLabel={option => option.name}
  getOptionValue={option => option.code}
/>

Please see the docs for more info.

[MaxWilson]

Thanks for posting this! Previous documentation led me astray. I also appreciate the doc link to http://www.react-select.com/props but kaareal's comment is what really unblocked me.

It turns out additionally that react-select gets confused if you try to use strings for your values, and set getOptionValue/getOptionLabel to x => x. It works fine if you wrap your strings in an object or an array. Too bad though, because displaying and selecting strings directly would be a really natural usecase.

[apwat56102]

@jossmac set Show list 5 row

[apwat56102]

select 500 row
me need showlist 5 row
for search

[jossmac]

@apwat56102 Please don't file GitHub issues to ask questions. Use Stack Overflow with a #react-select tag

---

Closing in favour of #2920

[siropkin]

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')} />;
};

You need to do deep search if you use groups in options:

options={[
  { value: 'all', label: 'All' },
  {
    label: 'Specific',
    options: [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
      { value: 'three', label: 'Three' },
    ],
  },
]}

const deepSearch = (options, value, tempObj = {}) => {
  if (options && value != null) {
    options.find((node) => {
      if (node.value === value) {
        tempObj.found = node;
        return node;
      }
      return deepSearch(node.options, value, tempObj);
    });
    if (tempObj.found) {
      return tempObj.found;
    }
  }
  return undefined;
};

[tonysepia]

May I please suggest that this is added to the top of the documentation for the component?

[ebonow]

@tonysepia Where in the top of the documentation would you have in mind? Perhaps a code example of a controlled input on the first page of the documentation, might help demystify this for a lot of new users? Thoughts?

Personally, I often set my controlled input variable name as selectedOption as it seems to make more sense to me and for other developers reading the code. I wonder if it would be more clear if the value prop was renamed to something like this, or if it would be more confusing to existing users now that we've gone down this path.

const [ selectedOption, setSelectedOption ] = useState();
const onChange = option => setSelectedOption(selectedOption);
return <Select value={selected} onChange={onChange} ... />

[tonysepia]

@ebonow I like your example, because here is the bit of code that is most upvoted on this page (and it has also helped me on this occasion):
value={options.find(option => option.value === 'chocolate')}

The key thing that (in my humble opinion) should be highlighted is that one can't simply pass a string or numeric value to the component - it needs to be a reference to the supplied list of options. The moment I saw that mentioned in the post from kaareal everything started to work.

Am I understanding the behaviour of the component correctly?

[ebonow]

@tonysepia ,

Yes That example would be the correct implementation.

The selected Option becomes the value onChange, so to set the value manually, you need the complete Option (or at least just the label and value).