React key in li - reactjs

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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> ); };

Answer 5

You can use index of array or keys of object row
Date.now is duplicate