I have given key prop to the child but still showing: Each child in a list should have a unique "key" prop

Issue

I am using moongodb and express in backend.
This is my component.

 return (
     <>
         <Addnote />
         <div className="row my-3">
             {notes.map((note) => {
                 return <Noteitem note={note} key={note._id}/>;
             })}
         </div>
     </>
)

Solution

As stated in the comments, note._id is not unique. You can fix it to be unique or use the item’s index like so:

{notes.map((note, i) => {
  return <Noteitem note={note} key={i} />;
})}

or shortened to:

{notes.map((note, i) => (
  <Noteitem note={note} key={i} />;
))}

Answered By – John

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0