React-bootstrap bookmarks: Warning. In the context of `<TabContainer>`, `<NavItem> the generated attributes` id` and `aria-controls` are returned

Question

I get this warning when the navigator loads for me. I have no idea what to do with it or what it means - I tried to add a parent div without any luck. The generateChildId property, in accordance with their documentation, accepts only 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 this, the navbar + tabs work completely as intended. It simply displays this warning constantly on the console.

Example here , code example:

  <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> ); 

Enabling this warning provides almost nothing

Answer 1

I think this is because you provided the id to NavDropdown .

The warning probably displays the wrong message because it does not expect an element such as a child of Nav .

By the way: why not wrap it inside NavItem ?