Material-UI - Click on Menu Button opens all Menu Items available - reactjs

Question

I'm having a small issue with Material-UI. And it is that everytime I click on a button to open an specific dropdown/menuItem it opens all the Dropdown/Items available in the AppBar. I did change the 'open' variable name, but it just gives me an error instead. The Material-UI documentation does not includes examples two or more dropdown menus.
Here's my code:
class MaterialTest extends Component {
state = {
anchorEl: null
};
handleClick = event => {
this.setState({ anchorEl: event.currentTarget });
};
handleClose = () => {
this.setState({ anchorEl: null });
};
render() {
const { anchorEl } = this.state;
const open = Boolean(anchorEl);
return (
<div style={mainDiv}>
<AppBar position="static" color="default" style={barStyle}>
<Toolbar style={toolStyle}>
<NavLink to="/">
<Button>Home</Button>
</NavLink>
<Button
aria-owns={anchorEl ? 'product-shipping' : null}
aria-haspopup="true"
onClick={this.handleClick}
>
Product Shipping
</Button>
<Menu
id="product-shipping"
anchorEl={anchorEl}
open={open}
onClose={this.handleClose}
>
<NavLink to="viewAll">
<MenuItem onClick={this.handleClose}>View Latest SKUs</MenuItem>
</NavLink>
<NavLink to="addSku">
<MenuItem onClick={this.handleClose}>Add New SKU</MenuItem>
</NavLink>
<MenuItem onClick={this.handleClose}>Import / Export</MenuItem>
<MenuItem onClick={this.handleClose}>Tables</MenuItem>
</Menu>
<Button
aria-owns={anchorEl ? 'inventory' : null}
aria-haspopup="true"
onClick={this.handleClick}
>
Inventory
</Button>
<Menu
id="inventory"
anchorEl={anchorEl}
open={open}
onClose={this.handleClose}
>
<NavLink to="viewInventory">
<MenuItem onClick={this.handleClose}>Site Inventory</MenuItem>
</NavLink>
<MenuItem onClick={this.handleClose}>
Warehouse Inventory
</MenuItem>
<MenuItem onClick={this.handleClose}>Add New Inventory</MenuItem>
</Menu>
<Button
aria-owns={anchorEl ? 'vendor-information' : null}
aria-haspopup="true"
onClick={this.handleClick}
>
Vendor Information
</Button>
</Toolbar>
</AppBar>
</div>
);
}
}
Any Ideas? Thank you

Answer 1

It might be because all the menus are being opened when anchorEl is set. The open prop is only checking for Boolean(anchorEl) and they all share this same state (so whenever it returns true they all open)
You could try setting an anchorEl2, anchorEl3 and so on in the state and change each Menu and Button accordingly.