Unknown prop nestedLevel on <a> tag. Remove this prop from the element.

[petersendidit]

Problem description

Using react-router's Link with nested ListItems results in a prop warning 'Unknown prop nestedLevel on tag. Remove this prop from the element.'

Steps to reproduce

Use this JSX

<List>
  <ListItem
    primaryText="Inbox"
    initiallyOpen={true}
    nestedItems={[
      <Link to="/starred/">
        <ListItem
          key={1}
          primaryText="Starred"
        />
      </Link>,
      <Link to="/sent/">
        <ListItem
          key={2}
          primaryText="Sent Mail"
        />
      </Link>,
    ]}
  />
</List>

Versions

• Material-UI: 0.15.4
• React: 15.3.0
• react-router: 2.6.1

This is caused by NestedList assuming that the direct children are all ListItems and not ListItems wrapped with a Link. https://github.com/callemall/material-ui/blob/master/src/List/NestedList.js#L39

[oliviertassinari]

This issue is definitely not limited to the ListItem component. E.g. with the IconMenu one: #4899.
I'm wondering how we could solve it elegantly.

[nikhilmahesh]

Any Quick fix for this ?

[oliviertassinari]

One approach could be to use #4560, but that has proven not to be a great solution (was reverted).
I have just tried the following one of the docs site and it's working just fine:

<ListItem
  primaryText="Get Started"
  primaryTogglesNestedList={true}
  nestedItems={[
    <ListItem
      containerElement={<Link to="/get-started/required-knowledge" />}
      primaryText="Required Knowledge"
      value="/get-started/required-knowledge"
    />,

// ...

Noticed that on the next branch the best pattern would probably to do:

<ListItem
  className={classes.navLink}
  gutters={false}
>
  <Button
    component={Link}
    to={to}
    className={classNames(classes.button, classes.navLinkButton)}
    activeClassName={classes.activeButton}
    ripple={false}
    onClick={this.props.onClick}
  >
    {title}
  </Button>
</ListItem>

[nikhilmahesh]

containerElement is not working for us but children is working fine. Thanks !

[parthi22]

containerElement worked for me, thanks.