1

I have a warning: Each child in an array or iterator should have a unique "key" prop. But I used a key. This is my code:

return (
  <li onClick={this.handleOnMarkAsCompleted} key={Date.now()}>
    { completed ? <b>{value}</b> : value }
  </li>
)

Any Ideas? Why doe it happen?

Pavel Coder
  • 33
  • 2
  • 7
  • I guess it's in a wrong place. the list component that renders these li-s should pass key to each li. – Evgeny Timoshenko May 23 '18 at 11:40
  • Possible duplicate of [Getting key prop warning in React, even though key is set](https://stackoverflow.com/questions/32256492/getting-key-prop-warning-in-react-even-though-key-is-set) – Evgeny Timoshenko May 23 '18 at 12:31
  • Possible duplicate of [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) – Dehan Mar 31 '19 at 05:48

5 Answers5

5

consider these two examples:

const Item = ({ i }) => <li key={i}>li</li>;
const List = ({ data }) => <ul>{data.map((_, i) => <Item i={i} />)}</ul>;

in this case, you'd get:

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

because li is not an array item. it's inside of Item which is an array item.

So key on Item would eliminate the problem:

const Item = ({ i }) => <li key={i}>li</li>;
const List = ({ data }) => <ul>{data.map((_, i) => <Item key={i} />)}</ul>;

code sandbox: https://codesandbox.io/s/oojwjq0lj6

from docs:

Keys only make sense in the context of the surrounding array.

For example, if you extract a ListItem component, you should keep the key on the <ListItem /> elements in the array rather than on the <li> element in the ListItem itself.

a note regarding use of Date.now():

Keys should be stable, predictable, and unique. Unstable keys (like those produced by Math.random()) will cause many component instances and DOM nodes to be unnecessarily recreated, which can cause performance degradation and lost state in child components.

Evgeny Timoshenko
  • 3,119
  • 5
  • 33
  • 53
  • 1
    Array index as a key is generally a bad idea since array can be sorted/filtered/altered then index associated to items does not map anymore leading to same trouble as you mention for unstable keys. – Cédric Hartland May 23 '18 at 13:58
1

Date.now() generates current time UNIX timestamp which is the same every time (in the second which all items are rendered). Key neeeds to be unique, as described in the error. Add some kind of id or (if no alternative is possible) an iterator.

Sebastijan Dumančić
  • 1,165
  • 1
  • 11
  • 20
0

As per ReactJS docs, Keys only make sense in the context of the surrounding array. Example of Correct key usage.

function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

Try it on codepen

Galeel Bhasha
  • 1,877
  • 13
  • 19
0

You need to use the key prop at the parent of this component. Lets suppose your component is named TaskItem, and the component in which you are using it is called TaskItems:

 const TaskItems = (props) => {
    return (
    <ul>
      {props.items.map((itemElement) => (
        <TaskItem
          key={itemElement.id}
        ></TaskItem>
      ))}
    </ul>
    );
    };
Harsh Mangalam
  • 1,116
  • 1
  • 10
  • 19
Aurora Murrja
  • 1
  • 1
-1

You can use index of array or keys of object row

Date.now is duplicate

Javad Khodadadi
  • 410
  • 1
  • 4
  • 13