Get the key of the clicked fluent ui button menu

Question

Once again I have the confirmation the Microsoft documentation, is really poorly auto-generated with a useless content.

I have a Fluent UI, Splitbutton. Here are the poorly generated docs. And there are two options "Email message" and "Calendar event"... is not clear at all how to get the click on these items and understand what item was clicked... I tried the following codepen

const menuProps: IContextualMenuProps = {
  items: [
    {
      key: 'emailMessage',
      text: 'Email message',
      iconProps: { iconName: 'Mail' },        
    },
    {
      key: 'calendarEvent',
      text: 'Calendar event',
      iconProps: { iconName: 'Calendar' },      
    },
  ],
  onItemClick: onItemClick,      
};

function onItemClick(event){
  console.log(event.currentTarget);
}

First of all the onClick in example is on the button itself, not on the menu items without any suggestion how to get them. Finally, after some researches, I found in another doc that it needs probably to have a onItemClick in the Props... undocumented, but then, also what is the type of this event and how to get the item key?

Answer 1

Completely by chance found an example on a non-ms related site, cause that is completely missing from the docs:

function onItemClick(event, item){
  console.log(item.key);
}

Answer 2

For the sake of completeness. There is even a whole documentation page just for the ContextualMenu, where the complete IContextualMenuProps interface is described along with some examples.

There you can see the type of onItemClick:

(ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: IContextualMenuItem) => boolean | void

If you take a closer look at the Button documentation you mentioned before, there is also a link to the said documentation under Implementation -> IButtonProps interface -> menuProps