React Material-UI Cookbook

How it works...

Let's start by looking at the state of the ComposingMenusWithState component:

const [anchorEl, setAnchorEl] = useState(null);const [items, setItems] = useState([  { name: 'First', onClick: onClose },  { name: 'Second', onClick: onClose },  { name: 'Third', onClick: onClose },  { name: 'Fourth', onClick: onClose, disabled: true }]);

The anchorEl state references the element that the menu is anchored to when the menu is open. When it's null, the menu are closed. The items array contains the menu items. The name property is rendered as the menu item text. The onClick function is called when the menu item is selected. The disabled property disables the item when true. Next, let's look at the onOpen() and onClose() handlers:

 const ...