How to get re-usable menu component?

Question

I am trying to setup a simple React app having only AppBar I want a menu to open when ever I click on app-bar items, I am using material-ui for styling. When I click first time on either "Project" or "Edit" items, menu appears successfully but don't know how to handle closing of this menu. You can find the working sample on codesandbox.io.

Please note that it is essential to maintain directory structure.

appbaritems.js

import React, { Component } from "react";
import { Button, ButtonGroup } from "@material-ui/core";
import MenuContent from "./menucontent";

class AppBarItems extends Component {
  constructor() {
    super();
    this.state = { menuAnchor: null };
  }

  handleClick = (event) => {
    this.setState({ menuAnchor: event.currentTarget });
  };
  handleClose = () => {
    this.setState({ menuAnchor: null });
  };
  render = () => {
    return (
      <div>
        <ButtonGroup
          variant="contained"
          color="primary"
          aria-label="contained primary button group"
        >
          <Button
            className="dense toolbarbutton"
            disableElevation
            onClick={this.handleClick}
          >
            Project
          </Button>
          <Button
            className="dense toolbarbutton"
            disableElevation
            onClick={this.handleClick}
          >
            Edit
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            View
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Layer
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Settings
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Plugin
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Vector
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Raster
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Database
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Web
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Processing
          </Button>
          <Button className="dense toolbarbutton" disableElevation>
            Help
          </Button>
        </ButtonGroup>
        <MenuContent anchorEl={this.state.menuAnchor} />
      </div>
    );
  };
}

export default AppBarItems;

meucontent.js

import React, { Component } from "react";
import { Menu, MenuItem } from "@material-ui/core";

class MenuContent extends Component {
  handleClose = () => {
    console.log("Don't know how to handle closing of this menu");
  };
  render = () => {
    return (
      <Menu
        elevation={0}
        anchorEl={this.props.anchorEl}
        open={Boolean(this.props.anchorEl)}
        onClose={this.handleClose}
      >
        <MenuItem>Item 1</MenuItem>
        <hr />
        <MenuItem>Item 2</MenuItem>
        <hr />
        <MenuItem>Item 3</MenuItem>
      </Menu>
    );
  };
}

export default MenuContent;

Answer 1

You can leverage the handleClose method in your AppBarItems component. Simply pass this as prop to MenuContent

<MenuContent anchorEl={this.state.menuAnchor} handleClose={this.handleClose} />

On MenuContent, execute that prop onClose

<Menu
  elevation={0}
  anchorEl={this.props.anchorEl}
  open={Boolean(this.props.anchorEl)}
  onClose={this.props.handleClose}
>

If you need the Menu to close when a menu item is clicked as well, you can use the same prop onClick of a MenuItem

<MenuItem onClick={this.props.handleClose}>Item 1</MenuItem>