In React.js how do you create a link to change the active tab using react-bootstrap?

Question

I am using React-bootstrap Tabs and I want to create a link within my tab content that changes the active tab and opens the second tab.

For example:

<Tabs ...>
   <Tab eventKey={1} ...>
      Click this <TabLink eventKey={2} ...>link</TabLink>
   </Tab>
   <Tab eventKey={2} ...>
      <TabLink eventKey={2} ...>
         ...
      </TabLink>
   </Tab>
</Tabs>

Obviously, TabLink does not exists as a component - and this is my question how do I do this?

Answer 1

The Tabs component has a prop called activeKey - use your component's state to control that value ( as shown in this example ), and then use an a tag with an onClick for your link.

Here's an example, adapted from the one I linked above - I can't test it right now, but it should give you the right idea.

const LinkedTabs = React.createClass({
  getInitialState() {
    return {
      key: 1
    };
  },

  goToTab(key) {
    this.setState({key});
  },

  render() {
    return (
      <Tabs activeKey={this.state.key}>
        <Tab eventKey={1} title="Tab 1">
          <span>Click this </span><a onClick={() => this.goToTab(2)}>link</a>
        </Tab>
        <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
        <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>
      </Tabs>
    );
  }
});