Uncaught TypeError: onItemHover is not a function

[peterkuykendall]

Hi There, I'm running into a console error on a vertical menu where when I do a mouseover. Note that I have a horizontal menu on the same page (with a dropdown) that's not throwing this error.

Here's the console error: Uncaught TypeError: onItemHover is not a function at MenuItem._this.onMouseEnter (MenuItem.js:54) at HTMLUnknownElement.callCallback (react-dom.development.js:100) at Object.invokeGuardedCallbackDev (react-dom.development.js:138) at Object.invokeGuardedCallback (react-dom.development.js:187) at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201) at executeDispatch (react-dom.development.js:466) at executeDispatchesInOrder (react-dom.development.js:488) at executeDispatchesAndRelease (react-dom.development.js:586) at executeDispatchesAndReleaseTopLevel (react-dom.development.js:597) at Array.forEach () at forEachAccumulated (react-dom.development.js:565) at runEventsInBatch (react-dom.development.js:728) at runExtractedEventsInBatch (react-dom.development.js:737) at handleTopLevel (react-dom.development.js:4201) at batchedUpdates (react-dom.development.js:12537) at batchedUpdates (react-dom.development.js:1939) at dispatchEvent (react-dom.development.js:4282)

Here's the code:

<Menu > <MenuItem key={props.props.groupId+'-create-event'}><Link to={props.props.rootUri + "/create-event"}>Create Event</Link></MenuItem> </Menu>

All the props variables are valid.

[picodoth]

@peterkuykendall can you provide a codepen?

[clofresh]

I'm getting a similar error. I don't know how to set up a codepen for this, but just looking at the code:

https://github.com/react-component/menu/blob/master/src/MenuItem.jsx#L88

It looks like it expects an onItemHover prop but it doesn't have a default prop. Similar issue for onClick, onDeselect and onDestroy

[picodoth]

@clofresh it's weird that onItemHover is missing since it's passed from the internal subPopupMenu: https://github.com/react-component/menu/blob/master/src/SubPopupMenu.js#L279, since it's a preset props so we should not have to set default for onItemHover.

Still need a reproduction link to see what's happening.

[picodoth]

no way to reproduce, closing now.

[dnlfrst]

I also came accross this issue yesterday. To get things moving, follow the steps below to reproduce the error.

Steps to reproduce (assuming Chrome to be used):

1. Open this codepen.
2. Open DevTools and switch to the Console tab.
3. Hover over the Menu.Item (i. e. the word Foo) with your mouse.
4. Observe the error message in the Console tab: Uncaught TypeError: onItemHover is not a function

The issue can either be fixed by handing down the props Menu propagates to Menu.Item, i. e. changing:

• const CustomMenuItem = () => { to const CustomMenuItem = props => { and
• <Menu.Item key="1"> to <Menu.Item {...props} key="1">

or removing the functional component completely, resulting in:

<Menu
   style={{ width: 256 }}
   defaultSelectedKeys={['1']}
>
   <Menu.Item key="1">
      Foo
   </Menu.Item>
</Menu>

IIRC such changes were not necessary in the past. Is this an issue or am I doing something wrong?

[zhulduz]

Hi, any updates?

[cesarve77]

Here a solution: you need to propagate the props https://codepen.io/anon/pen/jjzogG

[lalote]

same here, any updates?

[desperado1288]

same here, any updates?

dnlfrst's solution works perfectly. onItemHover is passed from SubPopupMenu to Menu children. So when Item is in your other component C, which gets those props, but then you need to pass those to Item as well. So in your component C you need to have <Item {...this.props}>.

[kaanbayram]

@dnlfrst Thank you bro you saved my life

[workforbala]

tried to pass props to children menu but getting new issues like other css properties getting overwritten like ant-menu-item-active is getting appended on all the list rather than selected list . so do we have any other solution to this issue ?