diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md
index 343a46d398..372ca04782 100755
--- a/components/menu/demo/sider-current.md
+++ b/components/menu/demo/sider-current.md
@@ -19,57 +19,46 @@ import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/ico
 
 const { SubMenu } = Menu;
 
-class Sider extends React.Component {
-  // submenu keys of first level
-  rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
+// submenu keys of first level
+const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
 
-  state = {
-    openKeys: ['sub1'],
-  };
+const Sider = () => {
+  const [openKeys, setOpenKeys] = React.useState(['sub1']);
 
-  onOpenChange = openKeys => {
-    const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
-    if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
-      this.setState({ openKeys });
+  const onOpenChange = keys => {
+    const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
+    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
+      setOpenKeys(keys);
     } else {
-      this.setState({
-        openKeys: latestOpenKey ? [latestOpenKey] : [],
-      });
+      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
     }
   };
 
-  render() {
-    return (
-      <Menu
-        mode="inline"
-        openKeys={this.state.openKeys}
-        onOpenChange={this.onOpenChange}
-        style={{ width: 256 }}
-      >
-        <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
-          <Menu.Item key="1">Option 1</Menu.Item>
-          <Menu.Item key="2">Option 2</Menu.Item>
-          <Menu.Item key="3">Option 3</Menu.Item>
-          <Menu.Item key="4">Option 4</Menu.Item>
+  return (
+    <Menu mode="inline" openKeys={openKeys} onOpenChange={onOpenChange} style={{ width: 256 }}>
+      <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
+        <Menu.Item key="1">Option 1</Menu.Item>
+        <Menu.Item key="2">Option 2</Menu.Item>
+        <Menu.Item key="3">Option 3</Menu.Item>
+        <Menu.Item key="4">Option 4</Menu.Item>
+      </SubMenu>
+      <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
+        <Menu.Item key="5">Option 5</Menu.Item>
+        <Menu.Item key="6">Option 6</Menu.Item>
+        <SubMenu key="sub3" title="Submenu">
+          <Menu.Item key="7">Option 7</Menu.Item>
+          <Menu.Item key="8">Option 8</Menu.Item>
         </SubMenu>
-        <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
-          <Menu.Item key="5">Option 5</Menu.Item>
-          <Menu.Item key="6">Option 6</Menu.Item>
-          <SubMenu key="sub3" title="Submenu">
-            <Menu.Item key="7">Option 7</Menu.Item>
-            <Menu.Item key="8">Option 8</Menu.Item>
-          </SubMenu>
-        </SubMenu>
-        <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
-          <Menu.Item key="9">Option 9</Menu.Item>
-          <Menu.Item key="10">Option 10</Menu.Item>
-          <Menu.Item key="11">Option 11</Menu.Item>
-          <Menu.Item key="12">Option 12</Menu.Item>
-        </SubMenu>
-      </Menu>
-    );
-  }
-}
+      </SubMenu>
+      <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
+        <Menu.Item key="9">Option 9</Menu.Item>
+        <Menu.Item key="10">Option 10</Menu.Item>
+        <Menu.Item key="11">Option 11</Menu.Item>
+        <Menu.Item key="12">Option 12</Menu.Item>
+      </SubMenu>
+    </Menu>
+  );
+};
 
 ReactDOM.render(<Sider />, mountNode);
 ```