Refactored MenuItem from class-based to functional component

src/menu/menu_item.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   Menu,
   Dropdown,
@@ -15,21 +14,17 @@ interface Props {
   menuType?: MenuType;
 }
 
-export class MenuItem extends React.Component<
+export function MenuItem(props: Props & MenuItemProps & DropdownItemProps) {
-  Props & MenuItemProps & DropdownItemProps
+  const newProps = {...props};
-> {
+  // Remove menuType from props to avoid error message in the console.
-  render() {
+  delete newProps.menuType;
-    const newProps = {...this.props};
+  return (
-    // Remove menuType from props to avoid error message in the console.
+    <>
-    delete newProps.menuType;
+      {props.menuType === MenuType.Menu ? (
-    return (
+        <Menu.Item {...newProps}>{props.children}</Menu.Item>
-      <>
+      ) : (
-        {this.props.menuType === MenuType.Menu ? (
+        <Dropdown.Item {...newProps}>{props.children}</Dropdown.Item>
-          <Menu.Item {...newProps}>{this.props.children}</Menu.Item>
+      )}
-        ) : (
+    </>
-          <Dropdown.Item {...newProps}>{this.props.children}</Dropdown.Item>
+  );
-        )}
-      </>
-    );
-  }
 }