score:3

Accepted answer

While there shouldn't be 2 blogs with the same ID you can fix the issue at hand by replacing the key from blog.id to the index of the post like this.

<div>
    <h2>Blogs</h2>
    <p>{user.name} logged in</p>
    {logout()}
    //change
    {blogs.map((blog,index) => 
    <Blog 
    //change
    key={index} 
    deleteBlog={() => deleteBlogId(blog.id)}
    blog={blog} 
    increment={() => incrementLike(blog.id)} />
    )}
</div>

I added //change to the lines I changed.

score:2

You can just use something like uuid for this which will generate a unique ID. 

import uuid from "uuid";

<>
  <h2>Blogs</h2>
  <p>{user.name} logged in</p>
  {logout()}
  {blogs.map((blog,index) => 
    <Blog 
      key={uuid.v4()} 
      deleteBlog={() => deleteBlogId(blog.id)}
      blog={blog} 
      increment={() => incrementLike(blog.id)} />
    )}
</>

Related Query

More Query from same tag