错误：在迭代器 react/jsx-key 中缺少元素的“key”道具

Question

Error: Missing "key" prop for element in iterator react/jsx-key info - Need to disable some ESLint rules?

return (
<div>
  <div>
    <BreadcrumbBlogs />
  </div>
  <div className={styles.container}>
    <div className={styles.blogblock}>
      {newsposts.slice(0, 6).map((post) => (
        <div className={styles.blogcontent} key={post.id}>
          <Image
            src={post.jetpack_featured_media_url}
            width={600}
            height={400}
            alt="thumbnail"
          ></Image>
          <Link href={`${post.id}`} className={styles.blogcolumn}>
            <div
              className={styles.blogtitile}
              dangerouslySetInnerHTML={{ __html: post.title.rendered }}
            ></div>
          </Link>
        </div>
      ))}
    </div>
  </div>
</div>

);

Screenshot

Answer 1

To fix this issue, add key={post.id} to your div element instead of the Link element. The ESLint rule in this case is providing valuable feedback so I wouldn't disable it.

Answer 2

In React, when you want to create multiple components, you have to provide a "key" for every child component, and that key has to be a unique value.

So, in order to solve that problem, add the key prop to the div

<div className={styles.blogcontent} key={post.id}>

In case you don't have an id, you can use anything that is unique (like the array index for example).