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

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

Answer 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.

Answer 3

Here, You can use onSelect as Barry Michael Doyle said. Let me post you a sample code to make it more clear for you.
function Example() {
return (
<Tabs defaultActiveKey="home" id="uncontrolled-tab-example"
className="mb-3" onSelect={(e) => handleClick(e)}>
<Tab eventKey="homeTab" title="Home">
</Tab>
<Tab eventKey="profileTab" title="Profile">
</Tab>
<Tab eventKey="contactTab" title="Contact">
</Tab>
</Tabs>
);
function handleClick(e) {
console.count(e);
//result will be the eventKey of the tab you clicked on.
// `homeTab` (when clicked on home tab)
// `profileTab` (when clicked on profile tab)
// `constactTab` (when clicked on Contact tab)
}
}