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.

Answer 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" })
}