Unknown prop "active" using LinkContainer with MenuItem from React Bootstrap

Question

I have a simple navbar built using react-bootstrap, that contains a dropdown. Inside the dropdown, I have wrapped each MenuItem in the dropdown with a LinkContainer element (react-router-bootstrap) to link the items to routes and highlight the active item. It all works fine on the surface, however I'm getting the following warning in the console:

Warning: Unknown prop `active` on <li> tag. Remove this prop from the element. For details, see https://facebook.github.io/react/warnings/unknown-prop.html
in li (created by ImmerseNavbar)
in ul (created by DropdownMenu)
in RootCloseWrapper (created by DropdownMenu)
in DropdownMenu (created by Dropdown)
in li (created by Dropdown)
in Dropdown (created by Uncontrolled(Dropdown))
in Uncontrolled(Dropdown) (created by NavDropdown)
in NavDropdown (created by ImmerseNavbar)
in ul (created by Nav)
in Nav (created by ImmerseNavbar)
in div (created by Grid)
in Grid (created by Navbar)
in nav (created by Navbar)
in Navbar (created by Uncontrolled(Navbar))
in Uncontrolled(Navbar) (created by ImmerseNavbar)
in section (created by ImmerseNavbar)
in ImmerseNavbar (created by App)
in div (created by App)
in App (created by RouterContext)
in RouterContext (created by Router)
in Router
in Provider

From what I understand from reading the issues on the react-bootstrap github (https://github.com/react-bootstrap/react-bootstrap/issues/1994 among others), I think the issue is to do with <MenuItem> passing the active prop from <LinkContainer> down to the <li>. I'm fairly new to react, and this is supposed to be fixed, so is there something that I'm doing wrong?

navbar.js

const ImmerseNavbar = props => (
  <section id="header">
    <Navbar fixedTop fluid>
        <Navbar.Header>
            <Navbar.Brand>
                <Link to="/">
                    <img src="/logo.png"/>
                </Link>
            </Navbar.Brand>
        </Navbar.Header>
        <Nav>
            <IndexLinkContainer to="/">
                <NavItem eventKey={1} >
                    <i className="fa fa-th"/>&nbsp;
                    Item 1
                </NavItem>
            </IndexLinkContainer>
            <LinkContainer to="/favourites">
                <NavItem eventKey={2}>
                    <i className="fa fa-star"/>&nbsp;
                    Item 2
                </NavItem>
            </LinkContainer>
        </Nav>
        <Nav pullRight>
            <NavDropdown eventKey={3} title="User Name" id="basic-nav-dropdown">

                <LinkContainer to="/preferences">
                    <MenuItem eventKey={3.1}>Item 3.1</MenuItem>
                </LinkContainer>
                <LinkContainer to="/account">
                    <MenuItem eventKey={3.2}>Item 3.2</MenuItem>
                </LinkContainer>
                <MenuItem divider />
                <li className="dropdown-header">Organisation</li>
                <LinkContainer to="/organisation/manage">
                    <MenuItem eventKey={3.3}>Manage</MenuItem>
                </LinkContainer>
                <LinkContainer to="/organisation/users">
                    <MenuItem eventKey={3.3}>Users</MenuItem>
                </LinkContainer>
                <LinkContainer to="/organisation/sources">
                    <MenuItem eventKey={3.3}>Sources</MenuItem>
                </LinkContainer>
                <MenuItem divider />
                <LinkContainer to="/logout">
                    <MenuItem eventKey={3.3}>Log out</MenuItem>
                </LinkContainer>
            </NavDropdown>
        </Nav>
      </Navbar>
    </section>
);

export default ImmerseNavbar;

The problem is definitely within the <NavDropdown> code, as if I remove that block the problem disappears. Using:

• react-bootstrap: 0.30.7
• react-redux: 4.4.6
• react-router: 3.0.0
• react-router-bootstrap: 0.23.1
• react: 15.4.1
• react-dom": 15.4.1

Any help would be much appreciated

Answer 1

So I figured this out, and it was indeed something I was doing wrong - it was the raw li element inside the NavDropdown being passed the active prop. Switching this out for a proper MenuItem (in my case <MenuItem header>) still rendered the same li element that I wanted, but MenuItem filters out the active prop so cleared the error.

Answer 2

The active prop can be applied only for Link component. But your problem can be fixed within MenuItem component. Intead of passing all props you can remove active props and pass the rest of them

const {active, ...withoutActive} = this.props;
// do somethign
return <MenuItem {...withoutActive}/>

Also take a look at this answer, it can be useful for you.

I hope it will help.