Warning: Each child in a list should have a unique “key” prop but i have key props [duplicate]

We Are Going To Discuss About Warning: Each child in a list should have a unique “key” prop but i have key props . So lets Start this ReactJS Article.

Warning: Each child in a list should have a unique “key” prop but i have key props

How to solve Warning: Each child in a list should have a unique “key” prop but i have key props [duplicate]

you have to pass key props to fragment(<>), not to the PostBasic.
Use like this,
Change this
( <> <PostBasic post={post} postBefore={postBefore} key={post.id} /> <RandomMessage /> </> );
TO
(<React.Fragment key={post.id}> <PostBasic post={post} postBefore={postBefore} /> <RandomMessage /> </React.Fragment> )

Warning: Each child in a list should have a unique “key” prop but i have key props [duplicate]

you have to pass key props to fragment(<>), not to the PostBasic.
Use like this,
Change this
( <> <PostBasic post={post} postBefore={postBefore} key={post.id} /> <RandomMessage /> </> );
TO
(<React.Fragment key={post.id}> <PostBasic post={post} postBefore={postBefore} /> <RandomMessage /> </React.Fragment> )

Solution 1

you have to pass key props to fragment(<>), not to the PostBasic.

Use like this,

Change this

(
  <>
    <PostBasic post={post} postBefore={postBefore} key={post.id} />
    <RandomMessage />
  </>
);

TO

(<React.Fragment key={post.id}>
  <PostBasic post={post} postBefore={postBefore} />
  <RandomMessage />
</React.Fragment>
)

Original Author Rahul Sharma Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

ittutorial team

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment