I am relatively new to typescript and trying to diagnose an error. I'm making sidebar navigation and trying to pull an icon from my navigation array.

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: "/" },
    ];

In my code, the error is stemming from this section:

<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>

Specifically the <Icon /> call is throwing the error: JSX element type 'Icon' does not have any construct or call signatures.

Worth noting everything works perfectly when that line is commented out.

I've worked through building props components and other Stack Overflow issues, but where I'm getting caught is in the menuItems.map section... most tutorials only define creating implementing single const items.

CodePudding user response：

JSX element type 'Icon' does not have any construct or call signatures

icon is already a called react component that returns JSX.

Simply replace </> with curly braces {}.

{menuItems.map(({ icon, ...menu }) => {
   ...
   {icon}
   ...
})}

CodePudding user response：

When you do

{ id: 1, label: "Dashboard", icon: <ComputerDesktopIcon />, link: "/" },

You're creating the React element at that moment, when you're declaring the object. The icon property is now a React element (rather than a functional component in the form of a function, or a class component in the form of a class). Calling a component with <SomeComponentName /> only makes sense when SomeComponentName refers to a component or a class.

The property in the object to pass down should be just the function or class - let it be instantiated with <Icon /> later.

const menuItems = [
    { id: 1, label: "Dashboard", icon: ComputerDesktopIcon, link: "/" },
    { id: 2, label: "Page 2", icon: AcademicCapIcon, link: "" },
    { id: 3, label: "Settings", icon: Cog6ToothIcon, link: "/" },
];