[Menu.Item] TypeError: Cannot read property 'indexOf' of undefined

[fortezhuo]

Version

2.12.3

Environment

OSX 10.12, Opera 46 / Chrome 59

Reproduction link

https://codepen.io/anon/pen/QMdwXP

Steps to reproduce

import { Menu } from 'antd'
const { Item } = Menu
const ParentMenu = (props) => {
   return <Item key='setting:1'>Option 1</Item>
}

const TestMenu = (props) => {
  return (
   <Menu mode='vertical'>
     <ParentMenu/> <== will cause error
     <Item key='setting:2'>Option 2</Item> <== no error occurs
   </Menu>
  )
}

And here is error result

Object.isSelected
webpack:///node_modules/rc-menu/lib/MenuItem.js:174
Object.render
webpack:///node_modules/rc-menu/lib/MenuItem.js:178
http://0.0.0.0:8889/vendor_1.js:13217:21
measureLifeCyclePerf
webpack:///node_modules/react-dom/lib/ReactCompositeComponent.js:75
ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext
webpack:///node_modules/react-dom/lib/ReactCompositeComponent.js:794
ReactCompositeComponentWrapper._renderValidatedComponent
webpack:///node_modules/react-dom/lib/ReactCompositeComponent.js:821
ReactCompositeComponentWrapper.performInitialMount
webpack:///node_modules/react-dom/lib/ReactCompositeComponent.js:361
ReactCompositeComponentWrapper.mountComponent
webpack:///node_modules/react-dom/lib/ReactCompositeComponent.js:257
Object.mountComponent
webpack:///node_modules/react-dom/lib/ReactReconciler.js:45
ReactCompositeComponentWrapper.performInitialMount
webpack:///node_modules/react-dom/lib/ReactCompositeComponent.js:370

What is expected?

Expected no error occurs while using wrapper.

What is actually happening?

Errors occur while I create wrapper for Menu.Item

Duplicate Issue : #7092

[ddcat1115]

Menu and SubMenu could not nest custom components.

[fortezhuo]

OK. For Ant Design Roadmap, will Menu and Sub Menu support wrapping custom component as new enhancement / feature ?

[ddcat1115]

For further information, you can trace #4853

[benjycui]

trace #4853

[gabrielferreiraa]

@ddcat1115 How do I solve this?

[defuyun]

why is this closed? it's not solved @benjycui

[nibiru2O12]

what's the workaround if i want to use Submenu in a custom component?

[mattcarlotta]

While this isn't an ideal solution, a work-around is that you invoke the function in-between brackets. The example provided above is a bit vague (for example, why are props being passed into the function if they aren't needed/used); however, to be consistent with the above example, here are 3 ways to achieve the desired result:

Declare a function inside the component:

menuComponent.js

import React from 'react';
import { Menu } from 'antd';
const { Item: MenuItem } = Menu;

export default (props) => {
  const SeparateMenuItem = () => ( <MenuItem key='setting:1'>Option 1</MenuItem> )
  return (
    <Menu mode='vertical'>
      { SeparateMenuItem() }
      <MenuItem key='setting:2'>Option 2</MenuItem>
    </Menu>
}

Declare a function outside of the component:

menuComponent.js

import React from 'react';
import { Menu } from 'antd';
const { Item: MenuItem } = Menu;

const SeparateMenuItem = props => ( <MenuItem key='setting:1'>Option 1</MenuItem> )

export default (props) => (
  <Menu mode='vertical'>
    { SeparateMenuItem(props) }
    <MenuItem key='setting:2'>Option 2</MenuItem>
  </Menu>
)

Declare a function in a different file:

menuComponent.js

import React from 'react';
import { Menu } from 'antd';
import SeparateMenuItem from './separateMenuItem';
const { Item: MenuItem } = Menu;

export default (props) => (
  <Menu mode='vertical'>
    { SeparateMenuItem(props) }
    <MenuItem key='setting:2'>Option 2</MenuItem>
  </Menu>
)

separateMenuItem.js

import React from 'react';
import { Menu } from 'antd';
const { Item: MenuItem } = Menu;

export default (props) => ( <MenuItem key='setting:1'>Option 1</MenuItem> )

Things to consider:

• It's ugly, kind of hacky, and has limited usage
• You'll run into issues if the separate menu item is wrapped inside a class component
• You will still run into issues if you try to wrap menu items in JSX elements because of how the Ant Menu is structured/rendered. For example, this won't work:

const SeparateMenuItem = props => ( 
  <div>
    <MenuItem key='setting:1'>Option 1</MenuItem>
  <div>
)