Uncaught TypeError: onItemHover is not a function

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 (<anonymous>) 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.

[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?

[cesarve77]

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