diff --git a/components/menu/demo/switch-mode.md b/components/menu/demo/switch-mode.md
index 9931d492d9..1601bb7930 100755
--- a/components/menu/demo/switch-mode.md
+++ b/components/menu/demo/switch-mode.md
@@ -25,69 +25,61 @@ import {
 
 const { SubMenu } = Menu;
 
-class Sider extends React.Component {
-  state = {
-    mode: 'inline',
-    theme: 'light',
+const Demo = () => {
+  const [mode, setMode] = React.useState('inline');
+  const [theme, setTheme] = React.useState('light');
+
+  const changeMode = value => {
+    setMode(value ? 'vertical' : 'inline');
   };
 
-  changeMode = value => {
-    this.setState({
-      mode: value ? 'vertical' : 'inline',
-    });
+  const changeTheme = value => {
+    setTheme(value ? 'dark' : 'light');
   };
 
-  changeTheme = value => {
-    this.setState({
-      theme: value ? 'dark' : 'light',
-    });
-  };
-
-  render() {
-    return (
-      <>
-        <Switch onChange={this.changeMode} /> Change Mode
-        <Divider type="vertical" />
-        <Switch onChange={this.changeTheme} /> Change Style
-        <br />
-        <br />
-        <Menu
-          style={{ width: 256 }}
-          defaultSelectedKeys={['1']}
-          defaultOpenKeys={['sub1']}
-          mode={this.state.mode}
-          theme={this.state.theme}
-        >
-          <Menu.Item key="1" icon={<MailOutlined />}>
-            Navigation One
-          </Menu.Item>
-          <Menu.Item key="2" icon={<CalendarOutlined />}>
-            Navigation Two
-          </Menu.Item>
-          <SubMenu key="sub1" icon={<AppstoreOutlined />} title="Navigation Two">
-            <Menu.Item key="3">Option 3</Menu.Item>
-            <Menu.Item key="4">Option 4</Menu.Item>
-            <SubMenu key="sub1-2" title="Submenu">
-              <Menu.Item key="5">Option 5</Menu.Item>
-              <Menu.Item key="6">Option 6</Menu.Item>
-            </SubMenu>
+  return (
+    <>
+      <Switch onChange={changeMode} /> Change Mode
+      <Divider type="vertical" />
+      <Switch onChange={changeTheme} /> Change Style
+      <br />
+      <br />
+      <Menu
+        style={{ width: 256 }}
+        defaultSelectedKeys={['1']}
+        defaultOpenKeys={['sub1']}
+        mode={mode}
+        theme={theme}
+      >
+        <Menu.Item key="1" icon={<MailOutlined />}>
+          Navigation One
+        </Menu.Item>
+        <Menu.Item key="2" icon={<CalendarOutlined />}>
+          Navigation Two
+        </Menu.Item>
+        <SubMenu key="sub1" icon={<AppstoreOutlined />} title="Navigation Two">
+          <Menu.Item key="3">Option 3</Menu.Item>
+          <Menu.Item key="4">Option 4</Menu.Item>
+          <SubMenu key="sub1-2" title="Submenu">
+            <Menu.Item key="5">Option 5</Menu.Item>
+            <Menu.Item key="6">Option 6</Menu.Item>
           </SubMenu>
-          <SubMenu key="sub2" icon={<SettingOutlined />} title="Navigation Three">
-            <Menu.Item key="7">Option 7</Menu.Item>
-            <Menu.Item key="8">Option 8</Menu.Item>
-            <Menu.Item key="9">Option 9</Menu.Item>
-            <Menu.Item key="10">Option 10</Menu.Item>
-          </SubMenu>
-          <Menu.Item key="link" icon={<LinkOutlined />}>
-            <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
-              Ant Design
-            </a>
-          </Menu.Item>
-        </Menu>
-      </>
-    );
-  }
-}
+        </SubMenu>
+        <SubMenu key="sub2" icon={<SettingOutlined />} title="Navigation Three">
+          <Menu.Item key="7">Option 7</Menu.Item>
+          <Menu.Item key="8">Option 8</Menu.Item>
+          <Menu.Item key="9">Option 9</Menu.Item>
+          <Menu.Item key="10">Option 10</Menu.Item>
+        </SubMenu>
+        <Menu.Item key="link" icon={<LinkOutlined />}>
+          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
+            Ant Design
+          </a>
+        </Menu.Item>
+      </Menu>
+    </>
+  );
+};
 
-ReactDOM.render(<Sider />, mountNode);
+ReactDOM.render(<Demo />, mountNode);
 ```