React-select: [v2] Lost functionality - valueKey & labelKey

[katsos]

In version 2 valueKey & labelKey are ignored.
This is a breaking change that is not described and I cannot find an alternative in v2 docs

expected behavior:
https://codesandbox.io/s/4rwrpwv8n7 (React-select v1)

actual behavior:
https://codesandbox.io/s/17l93l393 (React-select v2)

[msharkeyiii]

+1 for more detailed explanations, please. All of our dropdown options are blank.

The upgrade guide just says to use the new Component API, but I have no idea how it expects me to dynamically tell the component which object key I want since my objects I'm sending to it aren't consistent at all.

I have this function being passed to the "components" property, but how am I supposed to tell it which keys to use?

const elements = [
    {
        id: 'some_random_string',
        value: 'some random value',
    },....etc.
];

const Option = (props) => {
    return (
        <components.Option {...props}/>
    );
};
...
<Select
    components={{ Option }}
    options={elements}
/>

[Shywim]

Quoting https://react-select.com/upgrade-guide#concepts :

_This means the labelKey and valueKey props are no longer supported.
Instead, you can use the following props to customise how react-select deals with your options:_

<Select
  filterOption={(option: {}, inputValue: string) => boolean}
  formatOptionLabel={(option: {}, context: {} ) => Node}
  getOptionLabel={(option: {}) => string}
  getOptionValue={(option: {}) => string}
  isOptionDisabled={(option: {}, value: [{}]) => boolean}
  isOptionSelected?={(option: {}, value: [{}]) => boolean}
/>

[msharkeyiii]

@Shywim - Thanks for that. I didn't understand what "option" was in that context, but it's literally the current option being looped through. The code below is working for me now.

You can still set "valueKey" and "labelKey" as custom props you can send to the container holding your component for consistency, but instead of passing those values to the component, you run it through the functions indicated in comments below.

I hope this helps, @katsos

// Parent container component receive props like valueKey and labelKey that will be used to interact with <Select />
render() {
  const {
    elements = [], // Array of objects we want to list.
    labelKey, // Custom prop that can I can send to this component to tell which key to use
    valueKey, // Custom prop that can I can send to this component to tell which key to use
  } = this.props;

  return (
      <Select
        closeMenuOnSelect={false}
        getOptionLabel={(data) => {
          // "data" contains the current option object, so you just use your "labelKey" to return the value of that property.
          return data[labelKey];
        }}
        getOptionValue={(data) => {
          // "data" contains the current option object, so you just use your "valueKey" to return the value of that property.
          return data[valueKey];
        }}
        options={elements}
      />
  );
}

[katsos]

Thank you, guys. This is clear enough.

So this is the previous example with react-select v2
https://codesandbox.io/s/pjky8q6xx7
modified according to your comments

v1

labelKey='name'
valueKey='id'

v2

getOptionLabel={({ name }) => name}
getOptionValue={({ id }) => id}

New syntax opens some abilities that v1 couldn't have with previous syntax.
Awesome!

[stfenjobs]

v3 can work:

getOptionLabel={({ name }) => name}
getOptionValue={({ id }) => id}