title: How prevent a function from being called on an active tab?
body: <p>Example 1:</p>
  
  <p>click on <code>tab1</code>. Tab 1 is active tab. Click again on <code>tab1</code>(tab1 is active tab) I don't want to call function <code>start()</code>. Click on tab 2 or tab 3 I want to call function <code>start()</code>.</p>
  
  <p>Example 2:</p>
  
  <p>click on <code>tab2</code>. Tab 2 is active tab. Click again on <code>tab2</code>(tab 2 is active tab) I don't want to call function <code>start()</code>. Click on tab 1 or tab 3 I want to call function <code>start()</code>.</p>
  
  <p>Code here: <a href="https://codepen.io/kaka-milan/pen/YmXJJy?editors=1111" rel="nofollow noreferrer">https://codepen.io/kaka-milan/pen/YmXJJy?editors=1111</a></p>
  
  <p>Drawing: <a href="https://imgur.com/ApsUxZo" rel="nofollow noreferrer">https://imgur.com/ApsUxZo</a></p>
  
  <pre><code>var Tab = React.createClass({
    render: function() {
      return &lt;li 
        className={ this.props.isActive ? 'navigation--active': '' }
        onClick={ this.props.onActiveTab }
      &gt;
        &lt;p&gt;{ this.props.content }&lt;/p&gt;
      &lt;/li&gt;
    }
  });
  
  var Tabs = React.createClass({
    getInitialState: function() {
      return { selectedTabId: 1 }
    },
  
    isActive: function (id) {
      return this.state.selectedTabId === id;
    },
  
    setActiveTab: function (selectedTabId) {
      this.start();
      this.setState({ selectedTabId });
    },
  
    start: function() {
      return console.log('aaa')
    },
  
    render: function() {
      var total = this.props.data.points.total,
          tabs = total.map(function (el, i) {
            return &lt;Tab 
              key={ i }
              content={ el.name } 
              isActive={ this.isActive(el.id) } 
              start= {this.start}
              onActiveTab={ this.setActiveTab.bind(this, el.id) }
            /&gt;
          }, this);
  
      return &lt;ul className="navigation"&gt;
       { tabs }
      &lt;/ul&gt;
    }
  });
  
  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(
    &lt;Tabs data={ data } /&gt;,
    document.getElementById('main')
  );
  </code></pre>