I am encountering an issue with my React component. Even though I am setting keys using uuid during render, I keep receiving the warning
index.js:1 Warning: Each child in a list should have a unique "key" prop.import React, { useEffect, useState } from "react";
import { v4 as uuidv4 } from "uuid";
const Breadcrumbs = (props) => {
const { path, lang } = props;
const [breadcrumbsItems, setBreadcrumbsItems] = useState(null);
useEffect(() => {
if (path) {
const content = path.map((item, index) => {
if (!item.text) return null;
const isLast = index + 1 === path.length ? true : false;
return (
<>
{isLast ? (
<span key={uuidv4()} className={"post post-jobs current-item"}>
{item.text}
</span>
) : (
<span key={uuidv4()} property="itemListElement" typeof="ListItem">
<a
property="item"
typeof="WebPage"
title={item.title}
href="/"
className="home"
>
<span property="name">{item.text}</span>
</a>
</span>
)}
</>
);
});
setBreadcrumbsItems(content);
}
}, [path]);
return (
<div key={uuidv4()}>
{breadcrumbsItems ? (
<div className="breadcrumbs uk-visible@m">
{breadcrumbsItems && breadcrumbsItems}
</div>
) : null}
</div>
);
};
export default Breadcrumbs;
Could you please provide insight into what might be causing this issue in my code?