React-Bootstrap - How to activate a Tab outside NavItem

I want to change tab without clicking on the NavItem evtKey="x"

If I have a TabContainer like this :

      <Tab.Container id="tabcontainer" defaultActiveKey="a">
          <Tab.Content animation>
            <Tab.Pane eventKey="a">
              <ComponentA />
            </Tab.Pane>
            <Tab.Pane eventKey="b">
              <Componentb />
            </Tab.Pane>
          </Tab.Content>
          <Nav stacked bsStyle="pills" pullLeft>
             ... NavItems ...
          </Nav>
      <Tab.Container>

I want to know how I can do this :

    eventHandler(){
       changeToTab("b")
    }

inside ComponentA.

Solution 1:

The tab container, replaced defaultKey with activeKey={this.state.key}, and managed the state of the parent with a function, passed as a prop to ComponentA.

on the parent of the Tab.Container

 handleSelect(key){
    this.setState({ key : key })
 }

 render() {
    ... render stuff ...

    return (
       <Tab.Container id="tabcontainer" activeKey={this.state.key}>
            <Tab.Content animation>
              <Tab.Pane eventKey="a">
                <ComponentA changeTab={this.handleSelect}/>
              </Tab.Pane>
              <Tab.Pane eventKey="b">
                <ComponentB />
              </Tab.Pane>
            </Tab.Content>
            <Nav stacked bsStyle="pills" pullLeft>
               ... NavItems ...
            </Nav>
        <Tab.Container>
    )
 }

And on the Component A

eventHandler(){
   this.props.changeTab("b")
}