Unknown prop "active" using LinkContainer with MenuItem from React Bootstrap
<p>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: </p>

<pre><code>Warning: Unknown prop `active` on &lt;li&gt; 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
</code></pre>

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

<p><strong>navbar.js</strong></p>

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

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

export default ImmerseNavbar;
</code></pre>

<p>The problem is definitely within the <code>&lt;NavDropdown&gt;</code> code, as if I remove that block the problem disappears. Using:</p>

<ul>
<li>react-bootstrap: 0.30.7</li>
<li>react-redux: 4.4.6</li>
<li>react-router: 3.0.0</li>
<li>react-router-bootstrap: 0.23.1</li>
<li>react: 15.4.1</li>
<li>react-dom": 15.4.1</li>
</ul>

<p>Any help would be much appreciated</p>