Dropdown: items missing "key" prop, React warning displayed

[mcrawshaw]

Steps

• Update from version 0.68.3 to 0.68.4.
• Introduce a Dropdown element with more than one option specified. selection needs to be specified also.
• Run.

Expected Result

No warning from React.

Actual Result

React error:
Warning: Each child in an array or iterator should have a unique "key" props. Check the render method of 'Dropdown'.

Version

0.68.4

[mcrawshaw]

Note, adding a key to each option fixes the issue. For example:

<Dropdown selection options={[key: "1", value: "1", name: "Option 1"]} />

This wasn't the case for 0.68.3. I see a reference to key in the docs, but it is not consistently specified in the examples.

[mcrawshaw]

Looks to be an intended change. This issue is mentioned in the latest release documentation:
#1634

So does this mean we need key, value, and text now?

@karlludwigweise @davezuko

[dvdzkwsk]

From my understanding, key is definitely the preferred way, but it should have been nearly backwards compatible due to createShorthandFactory using value as the default if no key exists.

@levithomason I am, however, curious about this line:

Semantic-UI-React/src/lib/factories.js

Line 87 in 754416e

} else if (valIsString || valIsNumber) {

. This looks to be checking the wrong value, at least from my initial read through of the code. Are we sure that value is being used correctly as the default? Maybe I missed something in the DropdownItem change?

[jhartma]

I have a small problem, though: react throws the unique key prop error when allowAdditions is defined and I am not sure how to add a key prop there. Seems like the Add entry has no key?

[karlludwigweise]

This is the reason I did not want to make the change myself. The Dropdown is too big of a component to oversee for a first time change; for me at least. The component should ideally generate its own keys and use those.

[mcrawshaw]

@karlludwigweise, no stress, we have a work around.

Let's see what @levithomason says about the factory before we continue.

[layershifter]

Here is problem with a factory.

It will generate key only when element passed to it as number or string. When element is passed as object, factory expects that user will define key himself.

I will make PR that fixes this.

[levithomason]

This is actually not a bug, if you pass a string/number primitive then we'll assume that as they key. Otherwise, if you pass an options object or an element then you need to supply your own key just as is required by React itself.

@mcrawshaw

So does this mean we need key, value, and text now?

Yep. Anytime you use an object or an element in an array you'll need to pass a key.

If you use primitive shorthand (i.e. a string or number) then the shorthand factory will assume that value as the key.

@davezuko
Factories do not use the value prop for keys, that is specific only to the hidden select in the Dropdown. Factories will only use key/childKey to generate keys, no more magic key generation business as we used to have.

Tangent: the hidden select arguably should go away entirely, it is an artifact from the old days.

@jhartma
Thank you, this was an oversight on our part. The addItem object itself does not have a key. I've opened #1727 to resolve this issue.

[levithomason]

@jhartma fixed in #1727, it will go out on the next release.

[jhartma]

@levithomason nice, thanks a lot for the quick fix

[layershifter]

@levithomason it seems that you don't understand the problem described there. In #1639 we broken automatic key generation for Dropdown.Item. After this change we always pass an object to the factory, as I said, I proposed there, if you check it's code you will better understand problem.

[levithomason]

@layershifter thanks for pointing out my oversight. There are two points here:

1. Users' are now required to pass key in their options. This is the intended usage and not a bug. It should have been shipped as a breaking change but was not.

2. Rather than update the single case in the Dropdown to handle valid falsy key values, we should add the isNil check to the factory here. We currently check if (!props.key) ...., this treats falsy shorthand keys as nonexistent.

I'll update the PR you submitted to fix number 2 above. This way, all keys in all components are fixed.

[levithomason]

Released in semantic-ui-react@0.68.5.

[SidecarMaster]

The problem still exists. This is the array I passed in as options:
[{key: "react", value: "react", text: "react"}, {key: "redux", value: "redux", text: "redux"}, {key: "udacity", value: "udacity", text: "udacity"}

This is my Dropdown code:

        <Dropdown
          selection
          label={field.label}
          options={options}
          placeholder='Select Category'
          error={errorAttr}
          >
        </Dropdown>

And this is what is generated:
<div label="Select Category " role="listbox" aria-expanded="false" class="ui selection dropdown" tabindex="0"><div class="text" role="alert" aria-live="polite">react</div>...</div>

As you can see in <div class="text" role="alert" aria-live="polite">react</div> It still doesn't have a key even if the object I passed in has a key property.

[levithomason]

Note, React doesn't render keys to the DOM. They are used internally only. This example works in docs and tests. There must be something in the project using SUIR causing this.

If you create a minimal repo showing the issue, we can investigate further.

[rawberg]

Is there a way to specify a different object property as the key, such as the unique id that might be returned from the server? something like key={id} or key={item.id}

[levithomason]

@rawberg both key usages you've given are valid there. Not sure of your implementation. You might have better luck on Gitter or StackOverflow as this is a usage question.

[rawberg]

reading through the source and #1720 it looks specifying a key no longer works.

[levithomason]

Keys in Dropdown options are still required and still work. If you do not pass a key we will use the value as a fallback.