Dropdown's options can cause key warnings

Line 999 in Dropdown.js currently reads:

          <option key={option.value} value={option.value}>{option.text}</option>`

This causes problems when two options in the dropdown have the same value since you assign the key manually. Please either do not manually assign a key or do what it does for Dropdown.Item:

<DropdownItem
       key={`${opt.value}-${i}`}
     />

[levithomason]

You must use a string/number as the value. There are several reasons for this internal to the component. I’m currently updating the Dropdown to allow shorthand options, #1038, which explored the idea of allowing shorthand values, like objects. It was decided against due to complexity and it is not simple for users.

I, unfortunately, cannot detail all the reasons ATM due to time constraints. You should use a string/number value and lookup the object in your data array with methods outside of the dropdown.

[levithomason]

@TallOrderDev this issue from Jan 2017 and the Dropdown no longer includes a hidden select with option elements. Those old option elements are what used to use the key via the value.

If you have multiple items with the same value, you should explicitly set a key on those options. If you do not supply a key, we are forced to use something so we use the value.

Best!