Search code examples
reactjsdashboardantd

React Dashboard issue

I created one React app. For dashboard styling, I am using Antd. I don't know how to display different components if I click dashboard items, and it will display in one canvas.

I have created one search button and also I want to show the result, same canvas.

I want to make an app like this demo. 

   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;

For e.g: I want display below data on one dash board when user will click student table:

import React from "react";

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

This is what I have done so far:

enter image description here

Solution

  • Well since the <Menu> component takes an onclick handler you could essentially just use that combined with state to display your components. This uses the key to reference the state. Obviously you would need to replace the components with your page components. If you look at the docs it will let you peek the code for the menu and you can see how the onclick handler works.

    import React, { useState } from 'react';
import './App.css';
import Table from './Table';
import AddTableComponent from './AddTableComponent';
import { Layout, Avatar, Menu, Breadcrumb, 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 => {
    console.log('event: ', event);
    setState({
      ...state,
      table: false,
      add: false,
      course: false,
      info: false,
      [event.key]: !state[event.key]
    });
  };

  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" href="./">
                  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 }}>
                {state.table && <Table />}
                {state.add && <AddTableComponent />}
              </div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>Copy right-alakdam</Footer>
          </Layout>
        </Layout>
      </Layout>
    </div>
  );
}

export default App;

    Your table component should look like

    import React from 'react';

const Table = () => {
  return (
    <div>
      <table>
        <tbody>
          <tr>
            <td>Cell A</td>
            <td>Cell B</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default Table;