Warning: "Unknown props `active`, `activeKey`, `activeHref"

[mayerwin]

I am getting the following annoying warnings in the browser console:

warning.js:19 Warning: Unknown props active, activeKey, activeHref on < li> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop in li (created by ActiveComponent) in ActiveComponent (created by withRouter(ActiveComponent)) in withRouter(ActiveComponent) (created by MainLayout) in ul (created by Nav) in Nav (created by MainLayout) in div (created by NavbarCollapse) in Transition (created by Collapse) in Collapse (created by NavbarCollapse) in NavbarCollapse (created by MainLayout) 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 MainLayout) in div (created by MainLayout) in MainLayout (created by RouterContext) in RouterContext (created by Router) in Router (created by App) in App

According to https://github.com/react-bootstrap/react-bootstrap/issues/1994, react-router-active-component should filter out irrelevant props coming from parent components. Unless the culprit is react-router?

On another note, it would be good if you could publish the typings to allow easy usage with TypeScript.

[cmcrothers]

@mayerwin Have you upgraded to react router 3.0? I don't think react-router-active-component supports this new major version yet

[mayerwin]

According to my package.json file, I am using 3.0 (I just did jspm install react-router), but as per the link I indicated previously, it seems to be related to Bootstrap passing props to its children (they say it is the responsibility of child components to forget about them). I was able to make it work by wrapping the element returned by activeComponent with another one which sole purpose is to filter out the props ["active", "activeKey", "activeHref"].

let NavItem2 = activeComponent('li');

function objectWithout(obj, keys) {
    let target = {};
    Object.keys(obj).forEach(k => {
        if (keys.indexOf(k) == -1) {
            target[k] = obj[k];
        }
    });
    return target;
}

const NavItem = (props) => {
    return React.createElement(NavItem2, objectWithout(props, ["active", "activeKey", "activeHref"]));
};

[cmcrothers]

Could you try downgrading to react-router 2.8.1 and see if this is still the issue?

[mayerwin]

I can try, but isn't it possible for react-router-active-component to enforce a dependency version (were it to work, it would be quite a brittle solution)?

[dest81]

With react-router 2.8.1 works fine, but it would be good if react-router-active-component works with react 3.0.0 too :)