onClick function sider antd
import React, { useState } from "react";
import { Layout } from "antd";
import Sider from "./Sider";
import "./styles.css";
const { Content } = Layout;
export default function App() {
const style = {
fontSize: "30px",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center"
};
const components = {
1: <div style={style}>Option 1</div>,
2: <div style={style}>Option 2</div>,
3: <div style={style}>Option 3</div>,
4: <div style={style}>Option 4</div>
};
const [render, updateRender] = useState(1);
const handleMenuClick = menu => {
updateRender(menu.key);
};
return (
<div className="App">
<Layout style={{ minHeight: "100vh" }}>
<Sider handleClick={handleMenuClick} />
<Layout>
<Content>{components[render]}</Content>
</Layout>
</Layout>
</div>
);
}