Unique key prop?

Question

I am not sure how to solve this warning message??

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

  let theComments = 
  this.props.state.studentCommentReducer.studentCommentReducer.map((comments) => {
  return <CommentsItem key={comments.id} comments={comments} />;
  });



     Student: {this.props.comments.comment}

Is it as simple as changing comments.id to something else? – Just_some_Noob May 31 '18 at 14:28 — Just_some_Noob, May 31 '18 at 14:28

score 2 · Answer 1 · answered May 31 '18 at 14:38

In some way you need to specify a key for each item. You can do something like this

...map((comments) => {
  return <CommentsItem key={comments.id} comments={comments} />;
});

or

...map((comments, i) => {
  return <CommentsItem key={i} comments={comments} />;
});

Ref.: https://reactjs.org/docs/lists-and-keys.html#keys-must-only-be-unique-among-siblings

score 1 · Answer 2 · answered May 31 '18 at 14:42

1

You need to specify an unique key for each of the mapped CommentsItem, preferably not the index of the array.

In your code, make sure that comments.id is unique. That would solve the warning message you are receiving.

answered May 31 '18 at 14:42

palsrealm

5,083
1
20
25

score 0 · Answer 3 · answered Aug 08 '21 at 15:05

0

You can use index as the key only to the lists which are static .try using others as key

answered Aug 08 '21 at 15:05

Roshni Gupta

1
2

Unique key prop?

3 Answers3