16

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 function:

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.

4
  • did you tried by defining the onClick event on Tab, like this: <Tab eventKey={1} title="Log in" onClick={()=>this.changeTab()}> Commented Apr 4, 2017 at 18:09
  • Yeah I did and it didn't work so I'm asking here now. Commented Apr 4, 2017 at 18:12
  • Oh, it does work that way, had to do some tinkering but that worked. Thanks. Commented Apr 4, 2017 at 18:21
  • No nevermind, it works when you place it on the Tabs component but then how do I tell which tab is selected? Commented Apr 4, 2017 at 18:23

3 Answers 3

23

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

For multiple handlers you can do this:

handleSelect(key) {
  {
    1: this.setState({ heading: "Log in" }),
    2: this.setState({ heading: "Sign up" }),
    3: this.setState({ heading: "Something Else" }),
  }[key]
}
4
  • What if we need to add different event handlers to each tab? Seems like a problem.
    – Matt West
    Commented May 4, 2020 at 21:39
  • 2
    More if statements in your handler should solve that. Commented May 4, 2020 at 22:05
  • 1
    Or you can make an associative array of event keys and event handlers and call accordingly in the function
    – Silidrone
    Commented Jan 13, 2022 at 6:36
  • 1
    @MattWest I've updated my answer to cater for this, you could use if else statements, or switch statements, but I prefer this approach :D Commented Jun 30, 2023 at 6:40
4
<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.

1

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

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.