React-select: multi value select uses getOptionValue for react key, doesn't work for non-prim values.

[toshok]

I use non-primitive values for my options (providing a getOptionLabel to turn them into strings.) The problem is https://github.com/JedWatson/react-select/blob/916ef8f2813dbdd7bb5adb186ab3a085d40003c3/src/Select.js#L1478

uses the value for the react key. When isMulti={true}, I see a lot of:

[toshok]

maybe a getOptionKey prop would be appropriate?

[james-prado]

@toshok You could replace the <MultiValue /> component with a custom component and declare the key however you like:

import React from 'react';
import Select, { components } from 'react-select';
import uuidv4 from 'uuid/v4'; // Generate unique id

const MultiValue = (props) => {
    return <components.MultiValue {...props} key={uuidv4()} />;
};

const CustomSelect = (props) => {
  return (
    <Select
      components={{ MultiValue }}
      {...props}
    />
  )
}

[james-prado]

Nvm, this doesn't work because the custom component still gets wrapped for some reason :confused:

[nicolas-zozol]

The good way to work with complex object value is to use getOptionValue()
and getOptionLabel(). It's not very clear but works very well, as we had exactly the same problem.

const CustomSelect = (props) => {
  return (
    <Select
     getOptionValue=(option)=>option.user.id
     getLabelValue=(option)=>option.user.fullName
      {...props}
    />
  )
}

[bladey]

Hello -

Thanks for your assistance @nicolas-zozol.

In an effort to sustain the react-select project going forward, we're closing issues that appear to have been resolved via community comments or issues that are now redundant based on their age.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you, and we'll re-open it if necessary.

[RaGreen]

MultiValue component created by Select is throwing "Warning: Each child in a list should have a unique "key" prop." after selecting first value from Select with isMulti set to true.