I am currently working on creating a dynamic menu component in antd with typescript.
Although I found a solution using javascript here React Antd dynamic dropdown menu, it seems that when implementing it in typescript, the only available attributes for item are className, key, style.
Does anyone have suggestions on how to proceed with this in typescript?
Below is the code snippet where the build fails at icon={item?.icon} and {item?.label}.
import type { MenuProps } from 'antd';
function CustomAppBarMenu() {
const [menuItems, setMenuItems] = useState<MenuProps['items']>([]);
const main_window_menu_items: MenuProps['items'] = [
{
key: 'setting',
label: 'Setting',
icon: <IconSetting/>,
},
{
key: 'upgrade',
label: 'Upgrade',
icon: <IconUpgrade />,
disabled: true,
},
{
key: 'help',
label: 'Help',
icon: <IconHelp />,
},
{
key: 'about',
label: 'About',
icon: <IconAbout />,
},
];
const edit_menu_items: MenuProps['items'] = [
{
key: 'import',
label: 'Import',
icon: <IconImport/>,
},
{
key: 'export',
label: 'Export',
icon: <IconExport />,
},
];
const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
console.log(`Click on item ${key}`);
}
useEffect(() => {
if (appWindow.label === 'main') {
setMenuItems(main_window_menu_items);
} else if (appWindow.label === 'edit') {
setMenuItems(edit_menu_items);
}
})
return (
<Menu onClick={handleMenuClick}>
{
menuItems?.map((item) => {
return (
<Menu.Item key={item?.key} icon={item?.icon}>
{item?.label}
</Menu.Item>
)
})
}
</Menu>
)
}