Menu Item template

[bjedrzejec]

Hi,
I want to create a menu item template to use the Link element from react-router-dom. The following code:

const items = [
{
label: "New",
template: (item, options) => {
return (
<Link to = {"/ create"} className = {options.className}>
<span
className = {classNames (options.iconClassName, "pi pi-plus")}
> </span>
{item.label}
</Link>
);
},
},
];
works fine for a project without TypeScript, unfortunately I get the following error in a project that uses TypeScript:

Overload 1 of 2, '(props: MenubarProps | Readonly <MenubarProps>): Menubar', gave the following error.
Type '{label: string; template: (item: any, options: any) => Item; } [] 'is not assignable to type' MenuItem [] '.
Type '{label: string; template: (item: any, options: any) => Item; } 'is not assignable to type' MenuItem '.
Types of property 'template' are incompatible.
Type '(item: any, options: any) => Element' is not assignable to type 'string | Element | undefined '.
Type '(item: any, options: any) => Element' is missing the following properties from type 'Element': type, props, key
Overload 2 of 2, '(props: MenubarProps, context: any): Menubar', gave the following error.
Type '{label: string; template: (item: any, options: any) => Item; } [] 'is not assignable to type' MenuItem [] '. TS2769

I suspect a data type problem but have no idea how to fix it.

I will be grateful for your help.

Regards,
Bart

[mert.sincan]

Hi,

Please try;

Code: Select all

import {MenuItem, MenuItemOptions} from 'primereact/api';
...
template: (item: MenuItem, options: MenuItemOptions) => {
...
}

Best Regards,