title: How to assign which MenuItems open onClick when multiple Menus are present on the material-ui Appbar using React?
body: <p>I created an AppBar with a menu based on the examples given on <a href="https://material-ui-next.com/demos/app-bar/" rel="noreferrer">the material UI site</a> and it works fine with one menu. But when I try adding a second dropdown menu, on clicking either icon, I get the same set of MenuItems showing up as seen in the image.</p>
  
  <p><a href="https://i.stack.imgur.com/TKdtn.png" rel="noreferrer">Here is the list of menu items that are showing up when either icon is clicked</a></p>
  
  <pre><code>import React, { Component } from 'react';
  
  // Material UI Imports
  import { withStyles } from 'material-ui/styles';
  import AppBar from 'material-ui/AppBar';
  import Toolbar from 'material-ui/Toolbar';
  import Typography from 'material-ui/Typography';
  import Button from 'material-ui/Button';
  import IconButton from 'material-ui/IconButton';
  import Tooltip from 'material-ui/Tooltip';
  import Menu, { MenuItem } from 'material-ui/Menu';
  
  import PeopleIcon from 'material-ui-icons/People';
  import ViewListIcon from 'material-ui-icons/ViewList';
  import CompareArrowsIcon from 'material-ui-icons/CompareArrows';
  
  const styles = {
    root: {
      width: '100%',
    },
    flex: {
      flex: 1,
    },
    menuItem: {
      paddingLeft: '10px'
    }
  }
  
  class Header extends Component {
    constructor(props) {
      super(props);
  
      this.state = { anchorEl: null };
    }
  
    handleMenu = event =&gt; {
      console.log(event.currentTarget);
      this.setState({ anchorEl: event.currentTarget });
    }
  
    handleClose = () =&gt; {
      this.setState({ anchorEl: null });
    }
  
    render() {
      const { classes } = this.props;
      const { anchorEl } = this.state;
      const open = Boolean(anchorEl);
  
      return(
        &lt;div className={classes.root}&gt;
          &lt;AppBar position="static"&gt;
            &lt;Toolbar&gt;
              &lt;Typography type="title" color="inherit" className={classes.flex}&gt;
                New Faces
              &lt;/Typography&gt;
  
              {/* Menu Item One */}
              &lt;div&gt;
                &lt;Tooltip title="Lists" className={classes.menuItem}&gt;
                  &lt;IconButton
                    color="inherit"
                    aria-owns={open ? 'menu-list' : null}
                    aria-haspopup="true"
                    onClick={this.handleMenu}
                  &gt;
                    &lt;ViewListIcon /&gt;
                  &lt;/IconButton&gt;
                &lt;/Tooltip&gt;
  
                &lt;Menu
                  id="menu-list"
                  anchorEl={anchorEl}
                  anchorOrigin={{
                    vertical: 'top',
                    horizontal:'right',
                  }}
                  transformOrigin={{
                    vertical: 'top',
                    horizontal:'right',
                  }}
                  open={open}
                  onClose={this.handleClose}
                &gt;
                  &lt;MenuItem onClick={this.handleClose}&gt;Create List&lt;/MenuItem&gt;
                  &lt;MenuItem onClick={this.handleClose}&gt;List 1&lt;/MenuItem&gt;
                  &lt;MenuItem onClick={this.handleClose}&gt;List 2&lt;/MenuItem&gt;
                &lt;/Menu&gt;
              &lt;/div&gt;
  
              {/* Menu Item Two */}
              &lt;div&gt;
                &lt;Tooltip title="User Management" className={classes.menuItem}&gt;
                  &lt;IconButton
                    color="inherit"
                    aria-owns={open ? 'menu-appbar' : null}
                    aria-haspopup="true"
                    onClick={this.handleMenu}
                  &gt;
                    &lt;PeopleIcon /&gt;
                  &lt;/IconButton&gt;
                &lt;/Tooltip&gt;
  
                &lt;Menu
                  id="menu-appbar"
                  anchorEl={anchorEl}
                  anchorOrigin={{
                    vertical: 'top',
                    horizontal:'right',
                  }}
                  transformOrigin={{
                    vertical: 'top',
                    horizontal:'right',
                  }}
                  open={open}
                  onClose={this.handleClose}
                &gt;
                  &lt;MenuItem onClick={this.handleClose}&gt;Profile&lt;/MenuItem&gt;
                  &lt;MenuItem onClick={this.handleClose}&gt;User Management&lt;/MenuItem&gt;
                  &lt;MenuItem onClick={this.handleClose}&gt;Logout&lt;/MenuItem&gt;
                &lt;/Menu&gt;
              &lt;/div&gt;
            &lt;/Toolbar&gt;
          &lt;/AppBar&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default withStyles(styles)(Header);
  </code></pre>
  
  <p>How do you assign which MenuItems show up according to the icon that is clicked? I assumed it was supposed to show the MenuItems that are directly under the selected anchorEl. Any help would be much appreciated! </p>