React add class active on selected tab

Question

I have the following:

var Tab = React.createClass({
    getInitialState: function(){
        return {
          selected:\'\'
        }
    },
    activateTab: f         


        

Answer 1

In this case, would be better move state management to parent component Tabs, and pass to child only props which you need to detect class name or set new state in parent

var Tab = React.createClass({
  render: function() {
    return 

      
{ this.props.content }
    
  }
});

var Tabs = React.createClass({
  getInitialState: function() {
    return { selectedTabId: 1 }
  },
  
  isActive: function (id) {
    return this.state.selectedTabId === id;
  },
  
  setActiveTab: function (selectedTabId) {
    this.setState({ selectedTabId });
  },
  
  render: function() {
    var total = this.props.data.points.total,
    	tabs = total.map(function (el, i) {
          return 
        }, this);
                
    return 

     { tabs }
    
  }
});

const data = {
  points: {
    total: [
      { id: 1, name: 'tab-1', text: 'text' },
      { id: 2, name: 'tab-2', text: 'text-2' },
      { id: 3, name: 'tab-3', text: 'text-2' }
    ]
  }
}

ReactDOM.render(
  ,
  document.getElementById('container')
);

.navigation {}

.navigation--active {
  color: red;
}