React-Redux - Unique key warning on NavMenu

Question

New to this..

A number of questions "That might answer my question" display below when I started writing this question but they did'nt seem to deal with this.

In the console I get the following warning:

warning.js:36 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `NavMenu`. See fb-me-react-warning-keys for more information.
in NavItem (created by NavMenu)
in NavMenu (created by Connect(NavMenu))
in Connect(NavMenu) (created by Layout)
in div (created by Layout)
in Layout (created by RouterContext)
in RouterContext (created by Router)
in Router
in Provider

Says its in NavItem id the navmenu. I have "eventKey" set in this however I have checked to make sure there are no duplicates.. there arent. Maybe someone might enlighten me why this warning comes up and what I have to do to fix it.

Here is the NavMenu in its entirety:

import React, {Component} from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from "react-bootstrap"
import { LinkContainer } from 'react-router-bootstrap'

class NavMenu extends Component {
  render() {
    const { isAuthorised, username } = this.props;

    return (
      <div className='main-nav'>
        <Navbar inverse collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to={ '/' }>JobsLedger</Link>
            </Navbar.Brand>
            {<Navbar.Toggle />}
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav>
              <LinkContainer to={'/'}>
                <NavItem eventKey={1}><span className='glyphicon glyphicon-home'></span> Home</NavItem>
              </LinkContainer>
              <LinkContainer to={'/counter'}>
                <NavItem eventKey={2} ><span className='glyphicon glyphicon-education'></span> Counter</NavItem> 
                </LinkContainer> 
              <LinkContainer to={'/fetchdata'}>
                <NavItem eventKey={3}><span className='glyphicon glyphicon-th-list'></span> Fetch data</NavItem>
              </LinkContainer>
              {isAuthorised && (
                <NavDropdown eventKey={4} title="Clients" id="basic-nav-dropdown">
                  <LinkContainer to={'/clients/index'}>
                    <MenuItem eventKey={4.1}><span className='glyphicon glyphicon-th-list'></span> Client List</MenuItem>
                  </LinkContainer>
                  <LinkContainer to={'/clients/create'}>
                    <MenuItem eventKey={4.2}><span className='glyphicon glyphicon-user'></span> New Client</MenuItem>
                  </LinkContainer>
                  <MenuItem eventKey={4.3}>Something else here</MenuItem>
                  <MenuItem divider />
                  <MenuItem eventKey={4.4}>Separated link</MenuItem>
                </NavDropdown>
              )}
            </Nav>
              <Nav pullRight>
              {isAuthorised ? ([
                <NavItem eventKey={5}><span className='glyphicon glyphicon-user'></span> Hello {username}</NavItem>
              ]) : (
                <LinkContainer to={'/login'}>
                  <NavItem eventKey={6} ><span className='glyphicon glyphicon-user'></span> Login</NavItem>
                </LinkContainer>
              )}
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  isAuthorised: state.login.isAuthorised,
  username: state.login.username,
})
export default connect(mapStateToProps)(NavMenu);

I thought it might be to do with the "Link" for the "NavBar.Brand" so I refactored to this:

<Navbar.Header>
        <LinkContainer to={'/'}>
          <Navbar.Brand>
            <NavItem eventKey={1}>JobsLedger</NavItem>
          </Navbar.Brand>
        </LinkContainer>
        {<Navbar.Toggle />}
      </Navbar.Header>

In which I also renumbered everything. Still didnt fix the warning.

Why is this warning being given ie what have I dont wrong and what do I need to change to remove the warning.

Answer 1

The eventKey property that was mentioned in another answer is used for something else in react-bootstrap - I don't think it's related to the error here.

Background

Whenever you render an array, React expects each item to have a key property. I noticed an array near the end of your code here:

{isAuthorised ? ([
  <NavItem eventKey={5}><span className='glyphicon glyphicon-user'></span> Hello {username}</NavItem>
]) : (
<LinkContainer to={'/login'}>
  <NavItem eventKey={6} ><span className='glyphicon glyphicon-user'></span> Login</NavItem>
</LinkContainer>
)}

This says that if isAuthorized is true, render an array with one NavItem, otherwise render one LinkContainer.

So when isAuthorized is true, you end up rendering an array. Each item in the array needs a unique key property, or else you'll see the error above.

Solution

In this case, the array doesn't seem to be serving any purpose, so I'd just remove it, like this: (notice the first and last line)

{isAuthorised ? (
  <NavItem eventKey={5}> ...
) : (

If you need the array there for some reason, you should be able to fix it by adding a key property like this:

{isAuthorised ? ([
  <NavItem key={0} eventKey={5}> ...
]) : (

Answer 2

See https://facebook.github.io/react/docs/lists-and-keys.html#keys

You need the property 'key' instead of 'eventKey'. Ie <NavItem eventKey={1}> should be <NavItem key={1}> . You will need to add a unique key to every NavItem and a unique key to every LinkContainer.