Still having issues with unique key error when using object values

Using 2.0.0, I am still getting an error when I use object values with string labels.

This is the error I get:

Warning: Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

I created a sandbox showing the behavior here.

Just select ‘Option1’ and ‘Option 2’ and it will emit the error to the console.

[robotanz]

Looks like the value should not be an object. Try to provide options like this: { value: "Option 1", label: "Option 1", data: new Firm({ legalName: "Option 1" }) },

And then use the data field to access your object, and value would contain some unique key. Worked in my case to get rid of these warnings.

[jmargaglione]

I modified the code sandbox to better mirror my objects. There is an override of the toString method in my code that stringifies the JSON. I put a simpler version in the sandbox, but it has the same effect.

get [Symbol.toStringTag]() {
  return this._legalName; 
}

Same issue. Actually, if the code DID call toString() it would solve my problem, because the JSON-ified version would definitely be unique.

A better way might be to have a property called uniqueKey, which would be the name of a property on the object that uniquely identifies it.

<Select className="basic-single" classNamePrefix="select" isMulti={true} name="firm" options={firmOptions} uniqueKey="firmId" />

In the component’s code, the react key variable would then map to value[uniqueKey].

I’m not sure I follow you with the additional property bit. What would I add the property to?

I can see using a unique ID as the value, then using that to lookup the value when the event is called, but that is very inefficient (there are thousands of values right now, there will be many more soon).