resolve React key duplication warning in Breadcrumb component

This commit is contained in:
Pramod Mahajan 2025-06-09 10:58:41 +05:30
parent 1d43470783
commit b71ca1c7fb

View File

@ -3,30 +3,32 @@ import { useNavigate } from "react-router-dom";
const Breadcrumb = ({ data }) => { const Breadcrumb = ({ data }) => {
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol className="breadcrumb breadcrumb-custom-icon"> <ol className="breadcrumb breadcrumb-custom-icon">
{data.map((item, index) => {data.map((item, index) => (
item.link ? ( item.link ? (
<li className="breadcrumb-item cursor-pointer" key={index}> <li className="breadcrumb-item cursor-pointer" key={index}>
<a <a
aria-label="breadcrumb link link-underline-primary " role="button"
tabIndex={0}
aria-label="breadcrumb link"
onClick={() => navigate(item.link)} onClick={() => navigate(item.link)}
onKeyDown={(e) => {
if (e.key === 'Enter') navigate(item.link);
}}
> >
{item.label} {item.label}
</a> </a>
<i className="breadcrumb-icon icon-base bx bx-chevron-right align-middle"></i> <i className="breadcrumb-icon icon-base bx bx-chevron-right align-middle"></i>
</li> </li>
) : ( ) : (
<li <li className="breadcrumb-item active" key={index}>
className="breadcrumb-item active "
key={new Date().getMilliseconds()}
>
{" "}
{item.label} {item.label}
</li> </li>
) )
)} ))}
</ol> </ol>
</nav> </nav>
); );