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>
);
CodePudding user response:
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).
CodePudding user response:
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.