Why is Each MenuItem in the react-contextmenu List Identical?

React ContextMenu

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.

Problem: Handling Multiple List Items

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.

Solution:

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.

function ListItem(props) { 
  const contextOptions = props.contextOptions.map((option) => 
    <MenuItem 
      key={option.label + option.subLabel} 
      disabled={option.disabled} 
      divider={option.divider}>
        {option.label}<span className="context-sublabel">{option.subLabel}</span>
    </MenuItem>  
  );
  return (
    <div>
      <ContextMenuTrigger id={`list-item-context-${props.index}`}>
        <div className={"list-item-container" + (props.selected ? " list-item-selected" : "")}
          onClick={() => props.onSelection(props.index)} >
          <p className="list-item-label">{props.name}</p>
        </div>
      </ContextMenuTrigger>
      <ContextMenu id={`list-item-context-${props.index}`}>
        {contextOptions}
      </ContextMenu>
    </div>
  );
}

By following this approach, each list item has its own dedicated context menu, preventing issues with shared IDs.

Also Read:

React Micro Frontend