React-bootstrap tabs: Warning: In the context of a `<TabContainer>`, `<NavItem>`s are given generated `id` and `aria-controls` attributes

Question

I'm getting this warning whenever the navbar is loaded for me. I have no idea what to do with it or what it means - i've tried adding a parent div with no luck. The generateChildId property according to their documentation only takes functions as input. Super confusing.

Full warning:

Warning: In the context of a `<TabContainer>`, `<NavItem>`s are given generated `id` and `aria-controls` attributes for the sake of proper component accessibility. Any provided ones will be ignored. To control these attributes directly, provide a `generateChildId` prop to the parent `<TabContainer>`.

For the sake of it, the navbar + tabs work completely as intended. It simply throws this warning constantly in the console.

Example used from here , sample code:

  <Tab.Container id="tabs-with-dropdown" defaultActiveKey="first">
    <Row className="clearfix">
      <Col sm={12}>
        <Nav bsStyle="tabs">
          <NavItem eventKey="first">
            Tab 1
          </NavItem>
          <NavItem eventKey="second">
            Tab 2
          </NavItem>
          <NavDropdown eventKey="3" title="Dropdown" id="nav-dropdown-within-tab">
            <MenuItem eventKey="3.1">Action</MenuItem>
            <MenuItem eventKey="3.2">Another action</MenuItem>
            <MenuItem eventKey="3.3">Something else here</MenuItem>
            <MenuItem divider />
            <MenuItem eventKey="3.4">Separated link</MenuItem>
          </NavDropdown>
        </Nav>
      </Col>
      <Col sm={12}>
        <Tab.Content animation>
          <Tab.Pane eventKey="first">
            Tab 1 content
          </Tab.Pane>
          <Tab.Pane eventKey="second">
            Tab 2 content
          </Tab.Pane>
          <Tab.Pane eventKey="3.1">
            Tab 3.1 content
          </Tab.Pane>
          <Tab.Pane eventKey="3.2">
            Tab 3.2 content
          </Tab.Pane>
          <Tab.Pane eventKey="3.3">
            Tab 3.3 content
          </Tab.Pane>
          <Tab.Pane eventKey="3.4">
            Tab 3.4 content
          </Tab.Pane>
        </Tab.Content>
      </Col>
    </Row>
  </Tab.Container>
);

Googling this warning provides nearly nothing

Answer 1

I think is because you provided an id to NavDropdown element.

The warning is probably displaying a wrong message because it doesn't expect such item as child of Nav .

BTW: why not wrapping it inside a NavItem ?