React Semantic UI - add key to options in Dropdown menu

Question

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?

Frank · Accepted Answer · 2017-01-04 22:09:46Z

2

So looking at the code for the Semantic UI source for the dropdown component, the render options function converts your passed in options into a array of DropdownItem components:

renderOptions = () => {
    const { multiple, search, noResultsMessage } = this.props
    const { selectedIndex, value } = this.state
    const options = this.getMenuOptions()

    if (noResultsMessage !== null && search && _.isEmpty(options)) {
      return <div className='message'>{noResultsMessage}</div>
    }

    const isActive = multiple
      ? optValue => _.includes(value, optValue)
      : optValue => optValue === value

    return _.map(options, (opt, i) => (
      <DropdownItem
        key={`${opt.value}-${i}`}
        active={isActive(opt.value)}
        onClick={this.handleItemClick}
        selected={selectedIndex === i}
        {...opt}
        // Needed for handling click events on disabled items
        style={{ ...opt.style, pointerEvents: 'all' }}
      />
    ))
  }

the key for this array is set by taking the value prop and appending the index to it:

key={`${opt.value}-${i}`}

which should always be unique since the index is used but there is another part of the code for hidden inputs

 renderHiddenInput = () => {
    debug('renderHiddenInput()')
    const { value } = this.state
    const { multiple, name, options, selection } = this.props
    debug(`name:      ${name}`)
    debug(`selection: ${selection}`)
    debug(`value:     ${value}`)
    if (!selection) return null

    // a dropdown without an active item will have an empty string value
    return (
      <select type='hidden' aria-hidden='true' name={name} value={value} multiple={multiple}>
        <option value='' />
        {_.map(options, option => (
          <option key={option.value} value={option.value}>{option.text}</option>
        ))}
      </select>
    )
  }

in this one the key is set to only the value, not the value plus index.

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

this might be your problem, if you have duplicate values then the key will not be unique. Double check the options list to make sure you don't have duplicate values.

answered Jan 4, 2017 at 22:09

Frank

2,2182 gold badges19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kunok Over a year ago

Hey, thanks for info. I understand now. I think the issue happens because some of data is cached. Basically I am making auto-complete search and in jQuery version of Semantic UI I would make saveRemoteData to be equal false to prevent it. However in React version that setting is not present (or at least as far as I know-- github.com/Semantic-Org/Semantic-UI-React/issues/1124)

Frank Over a year ago

If your not familiar already, I highly suggest using the Chrome React Tools. This will let you look your options collection and double check the values.

Kunok Over a year ago

Hey thanks for advice, I am using Firefox version of React tools. I did a bit more digging and found the duplicates.

Collectives™ on Stack Overflow

React Semantic UI - add key to options in Dropdown menu

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related