I am currently learning typescript and facing an issue while working on a sidebar navigation feature. I have an array containing menu items with icons that I need to display.
Here is the array:
const menuItems = [
{ id: 1, label: "Dashboard", icon: <ComputerDesktopIcon />, link: "/" },
{ id: 2, label: "Page 2", icon: <AcademicCapIcon />, link: "" },
{ id: 3, label: "Settings", icon: <Cog6ToothIcon />, link: "/" },
];
The error in my code is coming from this part:
<div className="flex flex-col items-start mt-24">
{menuItems.map(({ icon: Icon, ...menu }) => {
const classes = getNavItemClasses(menu);
return <div className={classes}>
<Link href={menu.link}>
<div className="flex py-2 px-3 items-center w-full h-full">
<div>
<Icon />
</div>
{!toggleCollapse && (
<span className={classNames('text-md font-medium text-dark-gray')}>
{menu.label}
</span>
)}
</div>
</Link>
</div>
})}
</div>
The specific problem lies in the <Icon /> call which throws the error:
JSX element type 'Icon' does not have any construct or call signaturesIt's worth mentioning that everything functions correctly when I comment out that line.
I have gone through creating props components and other issues on Stack Overflow. However, I'm struggling with the menuItems.map section as most resources only cover defining and implementing single const items.