By following this approach, each list item has its own dedicated context menu, preventing issues with shared IDs.<\/p>\n
react-contextmenu is a powerful library for creating customizable right-click context menus in React applications. It supports submenus, keyboard navigation, and event handling, making it a versatile choice for enhancing user interactions.<\/p>\n
In a dynamic list where multiple items use the same id for both ContextMenuTrigger and ContextMenu, right-clicking on any item always displays the last rendered menu instead of the corresponding one.<\/p>\n
To fix this, each list item should dynamically generate a unique is based on its properties (e.g., index or name). This ensures that each item has its own corresponding context menu, displaying the correct one when right-clicked.<\/p>\n
function ListItem(props) { \r\n const contextOptions = props.contextOptions.map((option) => \r\n <MenuItem \r\n key={option.label + option.subLabel} \r\n disabled={option.disabled} \r\n divider={option.divider}>\r\n {option.label}<span className=\"context-sublabel\">{option.subLabel}<\/span>\r\n <\/MenuItem> \r\n );\r\n return (\r\n <div>\r\n <ContextMenuTrigger id={`list-item-context-${props.index}`}>\r\n <div className={\"list-item-container\" + (props.selected ? \" list-item-selected\" : \"\")}\r\n onClick={() => props.onSelection(props.index)} >\r\n <p className=\"list-item-label\">{props.name}<\/p>\r\n <\/div>\r\n <\/ContextMenuTrigger>\r\n <ContextMenu id={`list-item-context-${props.index}`}>\r\n {contextOptions}\r\n <\/ContextMenu>\r\n <\/div>\r\n );\r\n}\r\n<\/pre>\nBy following this approach, each list item has its own dedicated context menu, preventing issues with shared IDs.<\/p>\n
![\"Also](\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\")