[v2] Warning: Each child in an array or iterator should have a unique "key" prop.

version: “react-select”: “^2.0.0-beta.6” (I recently migrated from version 1.2.1, works fine in v1)

issue: FF reports: [v2] Warning: Each child in an array or iterator should have a unique “key” prop.

subsequent issue: I’m not able to select second value in isMulti mode, most likely due to above error. Selecting first value raises above error, selecting second option cause the blank value is set (the selection is reset to empty)

The code snippet (heavily simplified, the options hardcoded into callback instead of fetching from API). The ID is used as search value for API fetch.

class ProjectSelect extends React.Component {
  constructor(props) {
    super(props);
    this.loadOptions = this.loadOptions.bind(this);
  }

  loadOptions(inputValue, callback) {
    callback([
      {
        projectId: '123',
        id: '1',
        description: 'Project A',
      },{
        projectId:	'456',
        id: '2',
        description: 'Project B'
      },
    ]);
  }

  render() {
    const { isLocked } = this.props;

    return (
      <AsyncSelect
        name="Selector"
        cacheOptions={false}
        loadOptions={this.loadOptions}
        getOptionLabel={opt => opt.description}
        getOptionValue={opt => opt.projectID}
        isDisabled={isLocked}
        isMulti
        hideSelectedOptions={false}
      />
    );
  }
}

[jc211]

I just had the same problem and looking through the source code and examples it seems like you need your data formatted as follows:

[{ value: 'ocean', label: 'Ocean' }]

The value is used as the key for each MultiValue item so it needs to be unique. The label is required too.

What might work would be:

loadOptions(inputValue, callback) {
    callback([
      {
        value: '1',
        label: 'Project A',
      },{
        value: '2',
        label: 'Project B'
      },
    ]);
 }

[sahibjotsaggu]

I’d just like to add if someone in the future comes here and doesn’t find these comments helpful. I had this exact ‘warning’ but my problem was that somewhere in the code, the options were being remapped to include just the value string.

So options were going from [{value: 'something', label: 'something'}] to ['something'].