Unable to set key for Menu.Item in antd

59 Views Asked by At

Trying to implement drag and drop for menu items in antd.

Individual menu items:

function SidebarItem({ item, overlay }: TChildProp) {
  return (
    <Menu.Item
      onClick={(lala) => console.log(lala)}
      style={{ margin: "0px" }}
      key={item.key}
      icon={item.icon}
    >
      {item.label}
    </Menu.Item>
  );
}

Adding draggable to the menu item:

function DraggableSidebarItem({ item, ...rest }: TChildProp) {
  const { attributes, listeners, setNodeRef } = useDraggable({
    id: uuidv4(),
    data: {
      item,
      fromSidebar: true,
    },
  });

  return (
    <div key={item.key} ref={setNodeRef} {...listeners} {...attributes}>
      <SidebarItem key={item.key} item={item} {...rest} />
    </div>
  );
}

Using the draggable menu item to render submenu items:


function TemplateCreationSideBar() {
  const openMenuKeys: string[] = [
    "Form_Organiser",
    "Form_Components",
    "Input_Types",
  ];

  // Handling addition and removal of sections/components/input types
//   const handleComponentMenuClick = (key: string) => {
//     console.log(key);
//   };
  return (
    <div>
      <Menu
        mode="inline"
        style={{ height: "100%", width: "100%" }}
        defaultOpenKeys={openMenuKeys}
        // inlineCollapsed={false}
        // onClick={(item) => {
        //   handleComponentMenuClick(item.key);
        // }}
      >
        {Object.keys(fields).map((parentKey) => {
          return (
            <Menu.SubMenu
              title={fields[parentKey].label}
              key={fields[parentKey].key}
              onTitleClick={(item) => console.log(item)}
              icon={fields[parentKey].icon}
            >
              {fields[parentKey].children?.map((child) => {
                return <DraggableSidebarItem key={child.key} item={child} />;
              })}
            </Menu.SubMenu>
          );
        })}
      </Menu>
    </div>
  );
}

However, when i click on one item in the menu, all items will be focused/selected. When console.log onClick of each item, the keys are all undefined, hence duplicated.

Errors in console:

Warning: Duplicated key 'undefined' used in Menu by path [Input_Types]

Warning: Duplicated key 'undefined' used in Menu by path [Form_Components]

0

There are 0 best solutions below