Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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) {
    this.loadOptions = this.loadOptions.bind(this);

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

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

    return (
        getOptionLabel={opt => opt.description}
        getOptionValue={opt => opt.projectID}

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

jc211commented, Jun 23, 2018

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) {
        value: '1',
        label: 'Project A',
        value: '2',
        label: 'Project B'
sahibjotsaggucommented, Sep 7, 2018

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'].

Read more comments on GitHub >

github_iconTop Results From Across the Web

Each child in an array or iterator should have a unique "key ...
This warning comes when you don't add a key to your list items.As per react js Docs - ... Each child in a...
Read more >
How to Fix 'Each child should have a unique key prop' - Webtips
The "Each child in a list should have a unique "key" prop." warning happens in React when you create a list of elements...
Read more >
Warning: Each Child in a List Should Have a Unique 'key' Prop
When creating a list in the UI from an array with JSX, you should add a key prop to each child and to...
Read more >
Each child in an array or iterator should have a unique "key ...
When I send data as props I have error for iterator key. Warning: Each child in an array or iterator should have a...
Read more >
Auto assigning unique key to each child of a list in React
This is because React uses a unique “key” prop on each child of the list to create a relationship between the component and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found