React jsx first tab breaks after switch

Question

Currently constructing an App in reactjs and hit a strange issue. JSX code is below (sorry it's a bit verbose):

var NavigationTab = React.createClass({
  onClick: function() {   
    console.log('NT' + this.props.tab.index); 
    this.props.onTabClick(this.props.tab.index);
  },
  render: function(index){
    return (
      <li>
      <a href="#" onClick={this.onClick} className='navigation-tab'> {this.props.tab.title} </a>
      </li>
    )
  }
});

var NavigationPanel = React.createClass({
  getInitialState: function() {
    return {

    };
  },
  onTabClick: function(tab) {       
    //console.log(i) ;
    this.setState({active : tab});
    this.props.showTab(tab);
  },
  render: function() {      
      var self = this;
      var tabs = this.props.tabs.map(function(item, index){
        item.index = index;
        return <NavigationTab tab={item} onTabClick={self.onTabClick} />;
      });      
      return (
        <div id='navigation-panel' className='col-xs-2'>
          <ul className='nav nav-pills nav-stacked'>
          {tabs}
          </ul>
        </div>
    );
  }
});


var App = React.createClass({
  getInitialState: function() {
    return {      
      tabs: [
        {title: 'test', ref: 'test', content: <div> test </div>},
        {title: 'Dasboard', ref: 'dashboard', content: <div> home </div>},
        {title: 'Settings', ref: 'settings', content: <div> settings </div>},
        {title: 'Logout', ref: 'logout', content: <div> logout </div>}
      ],
      activeTab: 0};
  },
  showTab : function(index) {       
    console.log('AP ' + index); 
    this.setState({activeTab : index});        
  },
  render: function() {
    console.log('AP ' + this.state.activeTab);
    console.log('AP ' + this.state.tabs[this.state.activeTab].title);
    return (
      <div id="container">          
        <NavigationPanel showTab={this.showTab} tabs={this.state.tabs} />               
        <div id="content-body">          
          {this.state.tabs[this.state.activeTab].content} /* [1] */
        </div>
      </div>
    );
  }
});

What happens is after changing tabs, the first tab 'test' will no longer display.

If I change the line at /* [1] */ to {this.state.tabs[this.state.activeTab].ref} it works as expected.

Here is a fiddle

Answer 1

In older versions of React, you couldn't reuse component descriptors and needed to recreate them when rendering them multiple times. Your code works fine with React 0.11.