Warning: Encountered two children with the same key, `[object Object]

Question

dear friends hope you all doing well. I have built a simple web application by reactJs, and I got a lot of warnings, and I searched ad there is a lot of the same question, I couldn't any solution, please help if anyone knows. here are the codes.

*index.js:1 Warning: Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

in div (at Post.js:133)
in Post (at Posts.js:34)
in div (at Posts.js:29)
in Posts (at App.js:62)
in div (at App.js:61)
in div (at App.js:59)
in Route (at App.js:57)
in Switch (at App.js:35)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:34)
in div (at App.js:33)
in div (at App.js:32)

this is all the codes that have most of the warnings

return (
  <div className="post">
    <div className="adit" onClick={editMoreAndSettings}>
      <MoreVertTwoToneIcon className="editMoreAndSettings" />
    </div>
    <div className="dropdown-edit">
      <p>Edit</p>
      <p>Delete</p>
    </div>
    <div className="post__header">
      <Avatar className="post__avatar" alt="" src="" />
      <h4 className="h333">{username}</h4>
      <i className="post__verified" />
    </div>

    <h4 className="post__text">{caption}</h4>

    <img src={imageUrl} className="post__image" />
    <p className="timestamp">{new Date(timestamp?.toDate()).toUTCString()}</p>

    <div className="post__likeandlove">
      <i className="post__like" />
      <FavoriteOutlinedIcon className="post__heart" />
      <EmojiEmotionsOutlinedIcon className="post__anger" />
      <ThumbUpIcon className="iconss" />
      {/* <p className="likep">{noLikes} Likes</p>
       */}
      <p className="likep">
        {noLikes} {noLikes == 1 ? 'Like' : 'Likes'}
      </p>
    </div>
    <hr />

    <div className="post__likeoptions">
      <div className="like" onClick={likeHandle}>
        <i className={show} />
        <h3 className={show2}>Like</h3>
      </div>
      <div className="comment">
        <i className="comment2" />
        <h3 className="dope">Comment</h3>
      </div>
    </div>
    <form onSubmit={postComment}>
      <div className="commentBox">
        <Avatar className="post__avatar2" alt="" src={user?.photoURL} />
        <input
          className="commentInputBox"
          type="text"
          placeholder="Leave a comment..."
          value={comment}
          onChange={(e) => setComment(e.target.value)}
        />
        <input type="submit" disabled={!comment} className="transparent__submit" />
      </div>
      <p className="pressEnterToPost">Press Enter to post</p>
    </form>
    {comments.map((comment) => (
      <div key={comment} className={`comments__show ${comment.username == postUser?.displayName && 'myself'}`}>
        <Avatar className="post__avatar2" alt="" src={comment.photoURL} />
        <div className="container__comments">
          <p>
            <span>{comment.username}</span>
            <i className="post__verified"></i>&nbsp;{comment.text}
          </p>
        </div>
      </div>
    ))}
  </div>
);

do I need to create a unique key?

Answer 1

The reason why the error occurs is you might iterate your Post component and didn't give them a unique key

can dismiss the error in two ways:-

1. put key in both the Posts & Post component:-

• in Posts component:-

const Posts = () => {
  return (
    <div className="posts"> 
      <ImageUpload /> 
      {/* username={user?.displayName} */}
      {posts.map({id, post}) => (
        <Post key={id} otherProps={otherProps} />
      )}
    </div>
  )
}

• in Post component:-

const Post = ({postId}) => {
  return (
    <div key={postId} className="post">  
      {/* content */}
    </div>
  )
}

2. Or move your .map() entirely in Post component

• in Posts component:-

const Posts = () => {
  return (
    <div className="posts"> 
      <ImageUpload /> 
      {/* username={user?.displayName} */}
      <Post posts={posts} otherProps={otherProps} />
    </div>
  )
}

• in Post component:-

const Post = ({ posts, otherProps }) => {
  return (
    {posts.map({id, post}) => (
      <div className="post">
        {/* content */}
      </div>
    )}
  )
}

Answer 2

You are providing an object as key to the div which is getting converted to a string [object Object] by the react. Therefore, all the mapped elements are getting the same key. For performance reasons reacts needs unique keys for mapped lists. https://reactjs.org/docs/lists-and-keys.html#keys-must-only-be-unique-among-siblings

For details on [object Object] you can read more here: What does [object Object] mean?

One solution for this error could be to change the key to a unique string or number.

key={comment.username} or key={comment.id} should solve the issue. But the username and id should be unique.