React-select: Warning: flattenChildren(...): Encountered two children with the same key, `.$option-...

[bezreyhan]

This error gets logged to the console many times over every time a user hovers over the options menu.

[brianreavis]

Do you have options that share the same value?

[bezreyhan]

I don't. Though, should that be a problem. Would it be better to key the items by index rather than value?

[brianreavis]

Mind posting the props you're using?

[bezreyhan]

Sorry, your correct I just scanned through it and found some doubles and triples: https://github.com/bezreyhan/countries/blob/master/country_calling_codes.json

[bezreyhan]

Should no two items share the same value?

[bezreyhan]

Keying the options by index or by label fixes the issue. Is there a reason why we don't do so? If not I can make a PR.

[edgesoft]

You can reproduce the same problem in the live demo http://jedwatson.github.io/react-select/ when adding new options to this example:

CUSTOM RENDERING FOR OPTIONS AND VALUES:

[sospedra]

+1 I will quote @bezreyhan:

Keying the options by index or by label fixes the issue. Is there a reason why we don't do so? If not I can make a PR.

So, what are we waiting for?

[MorleyB]

+1

[akshaysinghi]

+1

[andrewdushane]

I've run into this issue with a country dropdown - multiple labels for one value, for example United Kingdom, England and Great Britain are all the same value.

My solution was to add an ID (using uniqueId from lodash) following the value and remove it on change.

const countryOptions = countries.map(({ label, value }) => ({ label, value:${value}-${uniqueId()}}));

const onCountryChange = (value) => country.onChange(value ? value.split('-')[0] : '');

<Select options={countryOptions} {...country} onChange={onCountryChange} />