What is the correct way to pass props to NavItem

Question

My code works but give an error so I just wanted to inform how I can prevent an error from showing up.

I'd like to learn how to write correct code.

This is what my code looks like now:

 export const AuthenticatedNavigation = (props) => { const activeCity = props.activeCity; return ( <div> <Nav className="fluid-container"> <LinkContainer to="beijing" > <NavItem eventKey={ 1 } href="">Chapter 1: Beijing</NavItem> </LinkContainer> <LinkContainer to="shanghai"> <NavItem eventKey={ 2 } activeCity={props.activeCity} href="/shanghai">{activeCity}</NavItem> </LinkContainer> <LinkContainer to="chengdu"> <NavItem eventKey={ 3 } href="/chengdu">Chapter 3: Chengdu</NavItem> </LinkContainer> </Nav> <Nav className="navbar-right"> <LinkContainer to="about"> <NavItem eventKey={ 1 } href="/about">About</NavItem> </LinkContainer> <NavDropdown eventKey={ 2 } title={ userName() } id="basic-nav-dropdown"> <MenuItem eventKey={ 2.1 } onClick={ handleLogout }>Logout</MenuItem> </NavDropdown> </Nav> </div> )} 

This is the error code I am getting:

 modules.js:4689 Warning: Unknown prop `activeCity` on <a> tag. Remove this prop from the element. For details, see link in a (created by SafeAnchor) in SafeAnchor (created by NavItem) in li (created by NavItem) in NavItem (created by AuthenticatedNavigation) in LinkContainer (created by AuthenticatedNavigation) in ul (created by Nav) in Nav (created by AuthenticatedNavigation) in div (created by AuthenticatedNavigation) in AuthenticatedNavigation (created by AppNavigation) in div (created by NavbarCollapse) in Transition (created by Collapse) in Collapse (created by NavbarCollapse) in NavbarCollapse (created by AppNavigation) 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 AppNavigation) in AppNavigation (created by Container(AppNavigation)) in Container(AppNavigation) (created by App) in div (created by App) in App (created by RouterContext) in RouterContext (created by Router) in Router 

As I said, it works, but I'd rather not have any errors ofcourse.

Cheers, Dominic

Answer 1

In your NavItem component, you probably have something like:

render: function() {
    return <a href={this.props.href} activeCity={this.props.activeCity}>{this.props.children}</a>;
}

In the latest versions of React, you can't pass props to DOM elements that aren't real attributes without a warning ( https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes ).

You could fix by doing the following:

render: function() {
    return <a href={this.props.href}>{this.props.children}</a>;
}

Answer 2

To pass non-standard attributes through React, you must follow the HTML 5 convention of using the "data-" prefix and no camelCase. The following is allowed:

<NavItem eventKey={ 2 } data-active-city={activeCity} href="/shanghai">{activeCity}</NavItem>