Here I'm trying to transform a functional component into class components! I want to achieve nested navigation open only one whenever I click
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Menu } from 'antd';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
// submenu keys of first level
const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
const Sider = () => {
const [openKeys, setOpenKeys] = React.useState(['sub1']);
const onOpenChange = keys => {
const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
setOpenKeys(keys);
} else {
setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
}
};
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>
<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 />, document.getElementById('container'));
Take care of states with declaring it in constructor, and you need a render method so you can paste your return on it. and whenever you call your class function you need this and to update your state, you'll be required this.setState().
You can refer this code :
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Menu } from "antd";
import {
AppstoreOutlined,
MailOutlined,
SettingOutlined
} from "@ant-design/icons";
const { SubMenu } = Menu;
// submenu keys of first level
const rootSubmenuKeys = ["sub1", "sub2", "sub4"];
class Sider extends React.Component {
constructor() {
super();
this.state = {
openKeys: ["sub1"]
};
}
onOpenChange = (keys) => {
const latestOpenKey = keys.find(
(key) => this.state.openKeys.indexOf(key) === -1
);
if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
this.setState({ openKeys: keys });
} else {
this.setState({ openKeys: latestOpenKey ? [latestOpenKey] : [] });
}
};
render() {
const { openKeys } = this.state;
return (
<Menu
mode="inline"
openKeys={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>
</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>
);
}
}
ReactDOM.render(<Sider />, document.getElementById("container"));