React Typescript: Ant Design Table with Dropdown Column pass Record to function

Question

Following Column :

{ title: "Action", render: (record: ToDoClass) => {
   return (
      <Dropdown overlay={menu}>
         <Button>
            User <DownOutlined />
         </Button>
      </Dropdown>
   )
}},

has the menu :

const menu = (
   <Menu onClick={() => this._updateUser}>
      <Menu.Item key="0" />
      <Menu.Item key="1">User 1</Menu.Item>
      <Menu.Item key="2">User 2</Menu.Item>
   </Menu>
);

must call the function: this._updateUser with the parameter record from the column and key from the menu :

private _updateUser = (record: ToDoClass, key: any): void => {
   console.log(record, key); //<- Console shows nothing
}

Answer 1

Based on the documentation , the onClick prop takes a function that takes an object { item, key, keyPath, domEvent } . You can try changing your _updateUser and menu to something like this:

<Menu onClick={this._updateUser}>
...
private _updateUser = ({ item, key }: { item: ToDoClass, key: any }): void => {
   console.log(item, key);
}