Q:

How to access component function in a component in reactjs

I have different jsx files.I want to access Menu.jsx component function in Header.jsx function to open menu. I am using Material-UI also. So Here I have a function "handleToggle" in Menu.jsx and I want to trigger this function from a button "onLeftIconButtonTouchTap" which is available in Header.jsx. How can I access component internal function from any other component, should I need to maintain any hierarchy?
App.jsx
export default class App extends React.Component{
    render(){
        return(
            <main>
                <Menu/>
                <Header/>
                <Body/>
                <Footer/>
            </main>
        )
    }
}

Header.jsx
export default class Header extends BaseMUI{
    render(){
        return (
            <header>
                <AppBar
                    title="title"
                    onLeftIconButtonTouchTap={this.handleToggle}
                    iconClassNameRight="muidocs-icon-navigation-expand-more"
                />
            </header>
        )
    }
}

Menu.jsx
export default class Menu extends BaseMUI{
    constructor(props) {
        super(props);
        this.state = {
            open: false
        };
    }

    handleToggle = () => this.setState({open: !this.state.open});

    handleClose = () => this.setState({open: false});

    componentDidMount(){
        console.log(this.refs);
    }

    render(){
        return (
            <nav>
                <RaisedButton
                label="Open Drawer"
                onTouchTap={this.handleToggle}/>

                <Drawer
                    docked={false}
                    width={200}
                    open={this.state.open}
                    ref="drawer"
                    onRequestChange={(open) => this.setState({open})}>
                        <MenuItem onTouchTap={this.handleClose}>Menu Item</MenuItem>
                        <MenuItem onTouchTap={this.handleClose}>Menu Item 2</MenuItem>
                </Drawer>
            </nav>
        )
    }
}

A:

You need to create parent component, store there state of opening menu, and change props of the menu - here an example, how it can be implemented in only react, without Flux and Redux, will be more right to use them, if you have many idential situations.
class MenuContainer extends React.Component {
  constructor(props) {
     super(props)
     this.state = { 
        isMenuOpen = false
     } 
  }

  shouldComponentUpdate(newProps, newState) {
     return newState.isMenuOpen != this.state.isMenuOpen 
  }

  openMenu = (isMenuOpen ) => {
      this.setState({isMenuOpen : isMenuOpen });
  }

  render () {
    return (
       <Header : isMenuOpen={this.state.isMenuOpen}
          openMenu= {this.openMenu}/>
       <Menu isMenuOpen={this.state.isMenuOpen})
    }
}

And then in your menu component 
shouldComponentUpdate(newProps) {
   return this.props.isMenuOpen != newProps.isMenuOpen
}

