How to call an event on tabs changed in react-bootstrap

Question

I've implemented Navigation Tabs in my React application using React-Bootstrap.

Like this:

<Tabs defaultActiveKey={1}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={2} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

Now on changing tabs I would like to call the following funtion:

changeTab(login) {
    if (login)
        this.setState({ heading: "Log in" })
    else
        this.setState({ heading: "Sign up" })
}

Where login is a Boolean that will be true for when the Log in tab is selected and false when the Sign up tab is selected.

How can I do that?

Edit:

I've figured out that you can call a function on when the tabs are clicked like this:

<Tabs defaultActiveKey={1} onClick={()=>this.changeTab()}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={1} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

But how can I know which tab was clicked? I need it to change the state based on which tab is clicked.

Solution 1

You need to use onSelect in the Tabs component.

Like this:

<Tabs defaultActiveKey={1} onSelect={this.handleSelect()}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={2} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

And then make this your handleSelect function:

handleSelect(key) {
    if (key === 1)
        this.setState({ heading: "Log in" })
    else
        this.setState({ heading: "Sign up" })
}

Solution 2

<Tab.Container id="" defaultActiveKey={key} onSelect={this.handleSelect}>
   <Nav variant="tabs">
        <Nav.Item>
        <Nav.Link eventKey={'1'}>Staking</Nav.Link>
        </Nav.Item>

        <Nav.Item>
        <Nav.Link eventKey={'2'}>Providers</Nav.Link>
        </Nav.Item>

        <Nav.Item>
        <Nav.Link eventKey={'3'}>Overview</Nav.Link>
        </Nav.Item>
    </Nav>
    <Tab.Content>
        <Tab.Pane eventKey={'1'}>
         <Row>
             <Col>
              1111
             </Col>
         </Row>
        </Tab.Pane>
    </Tab.Content>
    <Tab.Content>
        <Tab.Pane eventKey={'2'}>
        <div>22222</div>
        </Tab.Pane>
    </Tab.Content>
    <Tab.Content>
        <Tab.Pane eventKey={'3'}>
        <div>333</div>
        </Tab.Pane>
    </Tab.Content>
 </Tab.Container>

Now in your state add 'key' field with initial value '1'

  constructor(props) {
    super(props);
    this.state = {
     key: '1'
    };
  }

Then write a function

  handleSelect = (key) => {
      console.log(key,';;',typeof key)
      if(key === '1') {
          console.log('ll', key)
      } else if(key === '2') {
        console.log('ll', key)
      } else if(key === '3') {
        console.log('ll', key)
      }
  }

Initially when the page loades, the function is not called so you can make API calls or any thing you want to do in the 1st tab, in componentDidMount or any other function and place it in the 1st tab i.e where I've written 1111,after this when you click another tab, handleSelect function is called and based on key value with use if..else statement to perform specific task for specific tab.

Hope this helps. If any issue please let us know in the comment section.

Comments

[Matt West]

What if we need to add different event handlers to each tab? Seems like a problem.

[Barry Michael Doyle]

More if statements in your handler should solve that.

[Silidrone]

Or you can make an associative array of event keys and event handlers and call accordingly in the function