Unknown prop active on <a> tag when nesting Pager.Item inside a LinkContainer

[godmar]

I'm nesting a Pager.Item inside a react-router-bootstrap LinkContainer, which passes on an 'active' property. As a result, I'm getting:

warning.js:36 Warning: Unknown prop `active` on <a> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in a (created by SafeAnchor)
    in SafeAnchor (created by PagerItem)
    in li (created by PagerItem)
    in PagerItem (at ListUsersPage.js:103)
    in LinkContainer (at ListUsersPage.js:102)
    in ul (created by Pager)
    in Pager (at ListUsersPage.js:89)
    in div (at ListUsersPage.js:68)
    in ListAllUserPage (created by Connect(ListAllUserPage))
    in Connect(ListAllUserPage) (created by RouterContext)
    in div (at AppContainer.js:22)
    in div (at AppContainer.js:16)
    in AppContainer (created by Connect(AppContainer))
    in Connect(AppContainer) (created by RouterContext)
    in RouterContext (created by Router)
    in Router (at routes.js:17)
    in Provider (at index.js:14)

According to this issue this is a problem in Pager.Item, not LinkContainer. It should not pass all props to its descendants.

[taion]

No, this is react-bootstrap/react-router-bootstrap#185

[godmar]

Wow, we've just created a circular link chain from one issue back to this one!

Could you elaborate though?

Here is my workaround:

// FixedPagerItem
import React from 'react';
import { Pager } from 'react-bootstrap';

// this is a work-around for https://github.com/react-bootstrap/react-bootstrap/issues/2304
// to avoid the annoying "Unknown prop `active` ... " warnings.
// We wrap <Pager.Item> but strip off the 'active' property.
export default (props) => {
    // eslint-disable-next-line
    const {active, ...propsSansActive} = props;
    return <Pager.Item {...propsSansActive}>{props.children}</Pager.Item>
}

It creates a component 'FixedPagerItem', which acts like Pager.Item, works as expected, and does not produce the warning.

I believe react-router-bootstrap's LinkContainer passes 'active' to you in case you want to do something with it to render depending on whether this route is already active, but you can't pass it onto the children.

That said, if you believe I'm misusing <LinkContainer>, please suggest an alternative.
I've tried wrapping Pager.Item in react-router's <Link> class, but that gives me a DOM nesting violation because it wraps its children in an <a> tag.

The use case I have is that I wanted to render an actual <a href="..."> link users can open in a new tab or bookmark. Is this possible with Pager.Item?
So far, I've only been able to navigate via Pager.Item's onClick, which does not support bookmarking and doesn't give the user the option to open in a new tab.

Side note: the documentation says that "Pager.Item" has no public props, which suggests this is achieved by wrapping it (somehow).

[jquense]

the problem is that LinkContainer is for components that expect and active prop, not just any component that is a link. Pager.Item should pass through its props to the link tag because otherwise you'd have to whitefish all possible Dom properties for anchors. as @taion is noting the fix, if feasible, is to keep LinkContainer from passing active for page items.

[godmar]

In this issue, taion himself comments:

"I think you're misunderstanding what that warning means, and what the point of <LinkContainer> is.

<LinkContainer> is exactly intended to inject down onClick, href, and active props. It's the responsibility of the contained component (as is the case with React-Bootstrap components) to strip out the active prop and render the relevant active state."

Does this not mean that it's the responsibility of 'Pager.Item' (which is the contained component) to strip out the active property?

You're saying it should only strip it out if the child of LinkContainer is a Pager.Item? Wouldn't that violate the idea that components can be implemented independently of what a user chooses to apply them to?

I would tend to believe that the solution would indeed be for Pager.Item to "whitefish" only allowable properties to the SafeAnchor/link tag - this, at least, seems to be the intent of why React.js introduced this warning in the first place (?)

Please explain more.

[godmar]

Also, if I'm using <LinkContainer> wrongly, could you suggest an alternative component that preserves the same user experience?

[taion]

Please see my comments on react-bootstrap/react-router-bootstrap#185.

[godmar]

Thanks. I interpret this as saying that <LinkContainer> is the correct component to use for my use case, but will need to be fixed in the future. Till then I'll use my workaround.

[zverbatim]

@godmar your fix was helpful. thanks ;)