Material-ui: [List] unknown prop 'containerElement' in ListItem

[nicokant]

Warning: Unknown prop `containerElement` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by ListItem)
    in div (created by ListItem)
    in ListItem (created by SimpleNav)
    in div (created by List)
    in List (created by SimpleNav)
    in div (created by Paper)
    in Paper (created by Drawer)
    in div (created by Drawer)
    in Drawer (created by SimpleNav)
    in SimpleNav (created by App)
    in div (created by App)
    in App (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in MuiThemeProvider
    in Provider

Versions

• Material-UI: 0.15.4
• React: 15.3.0

[oliviertassinari]

Could you provide a reproduction test case? That would help a lot 👷 .
It could be a code sample or a live example. You can use this playground to do so: http://www.webpackbin.com/4yHN_S7ab.

[NewOldMax]

@oliviertassinari , currently i have same error, but can't reproduce in www.webpackbin.com (don't know why 😢 )
On my live project, code

<MenuItem disabled={true} primaryText={<FormattedMessage id="left_menu.reports" />} containerElement={<Link activeClassName="active" to="/reports" />} leftIcon={<ReportsIcon style={style.icon} hoverColor={style.iconHover} />} />

will give

warning.js:37Warning: Unknown prop `containerElement` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by ListItem)
    in div (created by ListItem)
    in ListItem (created by MenuItem)
    in MenuItem (created by LeftMenu)
    in div (created by List)
    in List (created by Menu)
    in div (created by Menu)
    in ClickAwayListener (created by Menu)
    in Menu (created by LeftMenu)
    in div (created by Paper)
    in Paper (created by LeftMenu)
    in div (created by LeftMenu)
    in LeftMenu (created by App)
    in div (created by App)
    in App (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in IntlProvider

Error will disappear, if i remove disabled={true}

I try to create live example ( http://www.webpackbin.com/41W0wqaa- ) with my project structure, but in this case he works correct.

[lucasbento]

@nicokant94, @NewOldMax: did you figure out what was wrong?

[NewOldMax]

@lucasbento , not, currently i'm busy with other things. I use <MenuItem disabled={true} /> for for not yet implemented pages, so in my case sometime i just delete this prop and all will be ok. But I still have this warning on 0.16.0

[oliviertassinari]

1. Here is the origin of this warning.
   The containerElement is forwarded to the <EnhancedButton /> when disabled is false.
   However, it's forwarded to a <div /> when disabled is true.
2. Should Material-UI be using the containerElement instead of a <div /> when disabled is true?
   Otherwise, users shouldn't be providing this property.

[lucasbento]

@oliviertassinari: has this been fixed?

[oliviertassinari]

@lucasbento I don't think so. The warning is just the tip of the iceberg.

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.