Add, Delete, Change, Disable/Enable menu items dynamically in material-ui and react

Question

I have searched everywhere for this answer to no avail. For instance, if I have a menu in the top right of a navbar, with TWO menu items to start (1. Login. 2. Register), and when a user clicks login or register and completes the form, the menu items change to (1 Logout 2. My Account). There also may be other menu items that will be enabled/disabled based on login state and role.

I can't find ANY code that gives an example of how to accomplish ANY of this, not even how to disable a menu item dynamically. I'm new to material-ui, but have been coding for decades. I can do this w/javascript but want to us material-ui.

Can someone help out with an example of how to do this using material-ui and react

Answer 1

Material UI gives you the components and handles most of the UI state for you (open/close, etc.), what you are describing is something that you have to do it yourself, to my understanding.

The way I'd do it would be to have some kind of component that would generate the links by an object such as this:

const links = {
  loggedIn: [{text: "Logout", path: "/logout"}, {text: "myAccount", path: "/dashboard"}],
  loggedOut: [{text: "Login", path: "/login"}, {text: "Register", path: "/register"}] 
}

I'd then have a variable to hold the values that interest me in that situation:

const linksToShow = state.user ? links.loggedIn : links.loggedOut

Then I'd have in my return/render (I'm not sure about the component itself, so I'll post some generic code here):

<Menu>
  {state.user ? linksToShow.map(link => <Link to={link.path}>{link.text}</Link>)}
</Menu>