resolve React key duplication warning in Breadcrumb component
This commit is contained in:
parent
1d43470783
commit
b71ca1c7fb
@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user