CODEWITHSUNDEEP
reactjsmaterial-ui
GregHouse
GregHouse

Reputation: 315

How to determine which icon is clicked in a menu with Material-UI icons

When clicking an icon in a material-ui menu, event.target does not provide values to determine which icon was clicked

Here is my code:

<ListItem button id="Dashboard" onClick={handleMenuListClick}>
  <ListItemIcon>
    <DashboardIcon />
  </ListItemIcon>
  <ListItemText primary="Dashboard" />
</ListItem>

When clicking on the button text area (ie. "Dashboard"), I am able to read the event.target values to determine which menu listitem was clicked. When clicking on the DashboardIcon, the handler is triggered but the event.target yields the svg (ex. svg class="MuiSvgIcon-root"...

Is there a better way to determine which icon was clicked?

Upvotes: 1

Views: 455

Answers (1)

John Ruddell
John Ruddell

Reputation: 25842

Like I was saying in the comments, I would make an inline lambda or bound function here to do this. Be explicit with your code and pass values that you expect. It'll be less error prone in the long run :) You should define a constant / enum to map to as well.

const Pages = {
  dashboard: 'Dashboard',
  profile: 'Profile'
}

and then render it

<ListItem
  button
  id={Pages.dashboard}
  onClick={() => handleMenuListClick(Pages.dashboard)}
>
  <ListItemIcon>
    <DashboardIcon />
  </ListItemIcon>
  <ListItemText primary="Dashboard" />
</ListItem>

In Typescript you can define enums 😍

enum Pages {
  dashboard = 'dashboard',
  profile = 'profile'
}

Upvotes: 2

Related Questions