反应仪表板问题

我创建了一个React应用。对于仪表板样式，我正在使用Antd。如果单击仪表板项目，我不知道如何显示不同的组件，它将显示在一个画布中。

我创建了一个搜索按钮，并且还想显示结果，使用相同的画布。

我想制作一个像这个演示这样的应用程序。

   import React, { useState } from "react";
import "./App.css";
import Table from "./Table";
import AddTableComponent from "./AddTableComponent";
import { Layout, Avatar, Menu, Icon, Breadcrumb, Button, Input } from "antd";
import Title from "antd/lib/typography/Title";
const { Header, Footer, Sider, Content } = Layout;
const { Search } = Input;
function App() {
  const [state, setState] = useState({
    collapsed: false,
    table: false,
    add: false,
    course: false,
    info: false
  });

  const onCollapse = collapsed => {
    setState({ ...state, collapsed });
  };

  const handleMenuClick = event => {
    setState({
      ...state,
      [event]: !state[event]
    });
  };
  return (
    <div className="App">
      <Layout>
        <Header style={{ padding: 10 }}>
          <Avatar style={{ float: "right" }} src="./dp.png" />
          <Title style={{ color: "white" }} level={3}>
            Student data
          </Title>
          <div style={{ paddingLeft: "900px" }}>
            <Search
              placeholder="input search text"
              onSearch={value => console.log(value)}
              style={{ width: 200 }}
            />
          </div>
        </Header>
        <Layout>
          <Sider
            collapsible
            collapsed={state.collapsed}
            onCollapse={onCollapse}
          >
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={["4"]}
              onClick={handleMenuClick}
            >
              <Menu.Item key="table">
                <span className="nav-text">Student table</span>
              </Menu.Item>
              <Menu.Item key="add">
                <span className="nav-text">Add student</span>
              </Menu.Item>
              <Menu.Item key="course">
                <span className="nav-text">Course</span>
              </Menu.Item>
              <Menu.Item key="info">
                <span className="nav-text" link="/Check.js">
                  Information table
                </span>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout>
            <Content style={{ padding: "0 50px" }}>
              <Breadcrumb style={{ margin: "16px 0" }}>
                <Breadcrumb.Item>Data</Breadcrumb.Item>
              </Breadcrumb>
              <div style={{ background: "#fff", padding: 24, minHeight: 580 }}>
                HERO DASHBOARD //THIS IS THE DASH BOARD, I WANT SHOW ALL DATA
                WHEN I WILL CLICK MENU ITEM(Student table,Add
                student,Course,Information table AS WELL THE SEARCH BUTTON)
              </div>
              {state.table && <Table />}
              {state.add && <AddTableComponent />}
            </Content>
            <Footer style={{ textAlign: "center" }}>Copy right-alakdam</Footer>
          </Layout>
        </Layout>
      </Layout>
    </div>
  );
}

export default App;

例如：当用户单击学生表时，我想在一个仪表板上显示以下数据：

import React from "react";

export default function Check() {
  return (
    <div>
      <table>
        <tr>
          <td>Cell A</td>
          <td>Cell B</td>
        </tr>
      </table>
    </div>
  );
}

到目前为止，这是我所做的：