Each child in a list should have a unique "key" prop: Unable to determine the issue in my code

Question

I am new to Typscript with React and I am getting this error message on my Google console Inspect element. I checked many posts over this but unable to understand what went wrong here. Can someone help to rectify the mistake in my code?

index.js:1 Warning: Each child in a list should have a unique "key" prop.

Check the render method of PostList. See

in div (at PostList.tsx:19)
in PostList (at pages/index.tsx:25)
in div (at pages/index.tsx:21)
in IndexPage (at App.tsx:68)
in component (created by Context.Consumer)
in Route (at App.tsx:65)
in div (at App.tsx:64)
in div (at App.tsx:85)
in Router (created by BrowserRouter)
in BrowserRouter (at App.tsx:84)
in App (at src/index.tsx:8)

 export default class PostList extends React.Component <Props, Post>{
 renderPosts(){
    const posts=Object.values (this.props.posts);
    return posts.map((n)=> <div>
         <h2> <Link to= {`/posts/${n._id}`}> {n.title}</Link></h2>
         </div>);
}
render(){
    return(
        <div>
            { this.renderPosts() }
        </div>
    )
 }
 }

Does this answer your question? [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) — Emile Bergeron, Jan 08 '20 at 15:34

score 6 · Accepted Answer · answered Jan 08 '20 at 13:24

6

Use key with the wrapping tag div

return posts.map((n, index)=> <div key={index}>
             <h2> <Link to= {`/posts/${n._id}`}> {n.title}</Link></h2>
             </div>);

unique keys are better, you should only use index as the last resort

key={n._id}

This is preferred.

answered Jan 08 '20 at 13:24

kooskoos

4,622
1
12
29

[You shouldn't use the `index` as the `key` value.](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) – Emile Bergeron Jan 08 '20 at 15:43
Yes I have already mentioned in my answer to use them as last resort – kooskoos Jan 08 '20 at 17:21
Not even as last resort, it's useless, React already use the index if you don't provide a key. – Emile Bergeron Jan 09 '20 at 15:57
https://reactjs.org/docs/lists-and-keys.html you should read official react docs, you will find it here – kooskoos Jan 09 '20 at 16:40
When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort: this is from the docs itself – kooskoos Jan 09 '20 at 16:41

score 1 · Answer 2 · answered Jan 08 '20 at 13:25

1

When you return html in a map function, each element should have a unique key.

Example: <div key={n._id}>...</div>

You can read more about this here: https://reactjs.org/docs/lists-and-keys.html

answered Jan 08 '20 at 13:25

Kristoffer Lund

209
3
14

score 0 · Answer 3 · answered Jan 08 '20 at 13:26

0

Whenever you do a map operation in react, the loop needs to have a unique key to identify whether it requires re-rendering during react rendering process. Read through the below link for more details refer keys section

answered Jan 08 '20 at 13:26

nbsamurai

346
4
13

Each child in a list should have a unique "key" prop: Unable to determine the issue in my code

3 Answers3