Izzilab:meterial-ui LeftNav callback doesn't fire when item click

react
1

I’m using the LeftNav component and implement it as following

<LeftNav ref="leftNav"menuItems={MenuItems} />

MenuItems = [
  { text: 'A', iconClassName: 'fa fa-search' },
  { text: 'B', iconClassName: 'fa fa-pencil-square-o' },
  { text: 'C', iconClassName: 'fa fa-star' },
  { text: 'D', onToggle: function(){console.log('toggled')} }
];

the strange thing is the icon for each item got loaded correctly, but the onToggle function never get fireback, anyone have any idea why? Thanks

2

I gave your code a try and experienced the same thing. I believe onToggle is extracted into the …other spread here. It is included in the props for the MenuItem component but is overwritten (per docs) by the Menu onToggle prop here.

I am not sure what you want to do with the onToggle event but maybe as a workaround you could attach an onChange handler to LeftNav to do what you need.

I am new to Javascript so take my analysis with a grain of salt.

1 Like
3

I believe clifforous is correct but I’m just learning Material UI. You don’t specify the event as a MenuItem property. Instead you handle the LefNav onChange event which is passed a Menu Item parameter.

<LeftNav ref="leftNav" 
	onChange={this._navChanged} 
	menuItems={MenuItems} />

_navChanged(e, sIndex, mItem){
	console.log(mItem);
  },