ReactDom.render(
  <Tabs>
    <Tab title="Frogs">
      <p>Frogs live in ponds.</p>
    </Tab>
    <Tab title="Sea Turtles">
      <p>Sea turtles live in seas.</p>
    </Tab>
  </Tabs>,
  document.getElementById('idOfTargetElement')
);

var ProgrammaticallyChangedActiveTab = React.createClass({
 
  getInitialState: function() {
    return {
      activeId: 'frogs'
    }
  },
 
  _handleButton: function(type, e) {
    e.preventDefault();
    this.setState({ activeId: type });
  },
 
  render: function() {
    return (
      <div>
        <button onClick={this._handleButton.bind(this, 'frogs')}>Frogs</button>
        <button onClick={this._handleButton.bind(this, 'turtles')}>Turtles</button>
        
        <Tabs activeId={this.state.activeId}>
          <Tab title="Frogs" id="frogs">
            <p>Frogs live in ponds.</p>
          </Tab>
          <Tab title="Turtles" id="turtles">
            <p>Sea turtles live in seas.</p>
          </Tab>
        </Tabs>
      </div>
    );
  }
 
});
 
ReactDOM.render(
  <ProgrammaticallyChangedActiveTab />,
  document.getElementById('idOfTargetElement')
);