React parent-child component communication

I did a navigation and called two child components. The getkey parameter in the parent App component should be equal to the value of the menuKey defined by the level 2 home child component [1]. How should I write it? (after I delete the content, I only want to realize that getkey is equal to menukey value, for ease of understanding)

import React, { Component } from "react";
import $ from "jquery";
import logo from "./logo.svg";
import "./App.css";
import "./style.less";
import Roster from "./Roster.js";
import Schedule from "./Schedule.js";
import { Switch, Route, Link } from "react-router-dom";


class Main extends Component {//1()
  render() {
    return (
      <Switch>
        <Route exact path="/" component={Home} />
      </Switch>
    )
  }
}
class Home extends Component {//2
  render() {
    const menuKey = [1];//2App
    return (
      <div>
        <b>2</b>
      </div>
    )
  }
}

class App extends Component {//App
  render() {
    return (
      <div>
        <p getkey={"menukey"}>
        <Main />
      </div>
    );
  }
}

export default App;

this is uncondensed code

import React, { Component } from "react";
import $ from "jquery";
import { Layout, Menu, Dropdown, Breadcrumb, Upload, Icon, Modal, Affix, Button, Steps, AutoComplete, Checkbox, DatePicker, message, Rate, Radio, Select, Carousel, Progress, Spin, BackTop } from "antd";
import logo from "./logo.svg";
import "./App.css";
import "./style.less";
import Roster from "./Roster.js";
import Schedule from "./Schedule.js";
import { Switch, Route, Link } from "react-router-dom";
const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;

class Main extends Component {//1
  render() {
    return (
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/roster" component={Roster} />
        <Route path="/schedule" component={Schedule} />
      </Switch>
    )
  }
}
class Home extends Component {//2
  render() {
    const menuKey = [1];//2App
    return (
      <Content style={{ margin: "0 16px" }}>
        <Breadcrumb style={{ margin: "16px 0" }}>
          <Breadcrumb.Item>User</Breadcrumb.Item>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
        </Breadcrumb>
        <div style={{ padding: 24, background: "-sharpfff", minHeight: 360 }}>
          Home
        </div>
      </Content >
    )
  }
}

class App extends Component {//App
  render() {
    return (
      <Layout style={{ minHeight: "100vh" }}>
        <Sider collapsible>
          <Menu theme="dark" mode="inline" defaultSelectedKeys={"menukey"}>
            <Menu.Item key="1">
              <Link to="/"></Link>
              <Icon type="user" />
              <span>Home</span>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to="/roster"></Link>
              <Icon type="video-camera" />
              <span>Roster</span>
            </Menu.Item>
            <Menu.Item key="3">
              <Link to="/schedule"></Link>
              <Icon type="upload" />
              <span>Schedule</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: "-sharpfff", padding: 0 }} />
          {/* Main */}
          <Main menuKey={this.menuKey} />
          <Footer style={{ textAlign: "center" }}>
            
          </Footer>
        </Layout>
        <BackTop />
      </Layout>
    );
  }
}

export default App;

React.js

Mar.16,2021