Tabs about reactstrap

[eddywashere]

Currently I've been getting by without tab specific components by using Nav and determining active content via route or other method.

<div>
  <Nav tabs>
    <NavItem>
      <NavLink href="/1">Link</NavLink>
    </NavItem>
    <NavItem>
      <NavLink href="/2">Another Link</NavLink>
    </NavItem>
  </Nav>
 {this.props.children || activeContent}
</div>

Eventually I'd see a more controlled example with Tab helpers: TabContent and TabPane. A toggle method would update state to reflect active tab. TabContent would pass that through to TabPane. Here's a rough example:

class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      activeTab: '1'
    };
  }

  toggle(tab) {
    if (this.state.activeTab !== tab) {
      this.setState({
        activeTab: tab
      });
    }
  }

  render() {
    return (
      <div>
        <Nav tabs>
          <NavItem>
            <NavLink onClick={() => {this.toggle('1')}}>Link</NavLink>
          </NavItem>
          <NavItem>
            <NavLink onClick={() => {this.toggle('2')}}>Another Link</NavLink>
          </NavItem>
        </Nav>
        <TabContent activeTab={this.state.activeTab}>
          <TabPane name="1">
            <p>tab content</p>
          </TabPane>
          <TabPane name="2">
            <p>tab content</p>
          </TabPane>
        </TabContent>
      </div>
    );
  }
}

[ajainarayanan]

@eddywashere Is there a semantic example you are following in implementing this component? Can you give an example to show how this component will eventually be used?

[eddywashere]

Shipped in 3.1.0