Semantic-ui-react: Add key to options in Dropdown menu

[kunokdev]

I have this Dropdown menu instance:

      <Dropdown
        selection
        options={this.state.options}
        search
        value={value}
        onChange={this.handleChange}
        onSearchChange={this.handleSearchChange}
      />

and when my backend returns response, which is then set as state and it is structured like this:

"options": [
    {
      "text": "New York,All Airports (NYC) , USA",
      "value": "NYC"
    },
    {
      "text": "New York,Newark Liberty Intl (EWR), USA",
      "value": "EWR"
    },
    {
      "text": "New York,John F Kennedy (JFK), USA",
      "value": "JFK"
    },
    {
      "text": "New York,La Guardia (LGA), USA",
      "value": "LGA"
    }
  ]

...I get this warning:

Warning: flattenChildren(...): Encountered two children with the same
key, 1:$BLZ. Child keys must be unique; when two children share a
key, only the first child will be used.

in select (created by Dropdown)
in div (created by Dropdown)
in Dropdown (created by SearchForm)

How do I add keys to these elements to prevent this warning?

[levithomason]

The hidden select element uses the value as the key. Your endpoint is returning multiple options with the same value. I think it makes sense to use the value as the key since there should only ever be a single option with a given value.

You should update the endpoint to return unique values only.