<p dir="auto">For the code below, the tabs are not responding...</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react';
import mui from 'material-ui';
import {Tabs, Tab} from 'material-ui';
const ThemeManager = new mui.Styles.ThemeManager();

class JSTabs extends React.Component {
    getChildContext() {
        return {
            muiTheme: ThemeManager.getCurrentTheme()
        };
    }
    render() {
    return &lt;Tabs&gt;
          &lt;Tab label=&quot;Item One&quot; &gt;
            &lt;div&gt;
              &lt;h2&gt;Tab One Template Example&lt;/h2&gt;
              &lt;p&gt;
                This is an example of a tab template!
              &lt;/p&gt;
              &lt;p&gt;
                You can put any sort of HTML or react component in here.
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/Tab&gt;
          &lt;Tab label=&quot;Item Two&quot; &gt;
            &lt;div&gt;
              &lt;h2&gt;Tab Two Template Example&lt;/h2&gt;
              &lt;p&gt;
                This is another example of a tab template!
              &lt;/p&gt;
              &lt;p&gt;
                Fair warning - the next tab routes to home!
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/Tab&gt;
          &lt;Tab
            label=&quot;Item Three&quot;
            route=&quot;home&quot;
            onActive={this._onActive} /&gt;
    &lt;/Tabs&gt;
    }

    _onActive(tab){
      this.context.router.transitionTo(tab.props.route);
    }

}

JSTabs.childContextTypes = {muiTheme: React.PropTypes.object};

React.render(&lt;JSTabs /&gt;,document.querySelector('body'));"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">mui</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-v">Tabs</span><span class="pl-kos">,</span> <span class="pl-v">Tab</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui'</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">ThemeManager</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-s1">mui</span><span class="pl-kos">.</span><span class="pl-c1">Styles</span><span class="pl-kos">.</span><span class="pl-c1">ThemeManager</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-v">JSTabs</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
    <span class="pl-en">getChildContext</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-kos">{</span>
            <span class="pl-c1">muiTheme</span>: <span class="pl-v">ThemeManager</span><span class="pl-kos">.</span><span class="pl-en">getCurrentTheme</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
        <span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">Tabs</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">Tab</span> <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-s">"Item One"</span> <span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span>Tab One Template Example<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
                This is an example of a tab template!
              <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
                You can put any sort of HTML or react component in here.
              <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Tab</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">Tab</span> <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-s">"Item Two"</span> <span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span>Tab Two Template Example<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
                This is another example of a tab template!
              <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
                Fair warning - the next tab routes to home!
              <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Tab</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">Tab</span>
            <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-s">"Item Three"</span>
            <span class="pl-c1">route</span><span class="pl-c1">=</span><span class="pl-s">"home"</span>
            <span class="pl-c1">onActive</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_onActive</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Tabs</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">}</span>

    <span class="pl-en">_onActive</span><span class="pl-kos">(</span><span class="pl-s1">tab</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">context</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-en">transitionTo</span><span class="pl-kos">(</span><span class="pl-s1">tab</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">route</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

<span class="pl-kos">}</span>

<span class="pl-v">JSTabs</span><span class="pl-kos">.</span><span class="pl-c1">childContextTypes</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-c1">muiTheme</span>: <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">object</span><span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">JSTabs</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">'body'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I inserted Tabs code into my component. OK, Tabs displayed on page but second tab remains inactive and I can't set it active.<br>
Where I'm not right?<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/10769646/5972646/cb85782c-a8a8-11e4-801a-2c3f01dab6d1.png"><img src="https://cloud.githubusercontent.com/assets/10769646/5972646/cb85782c-a8a8-11e4-801a-2c3f01dab6d1.png" alt="kiss_12kb 1422604209" style="max-width: 100%;"></a><br>
Tabs code:<br>
<code class="notranslate">&lt;div className="authorization"&gt;</code><br>
<code class="notranslate">&lt;Tabs&gt;</code><br>
<code class="notranslate">&lt;Tab label="Авторизация"&gt;</code><br>
<code class="notranslate">{login}</code><br>
<code class="notranslate">&lt;/Tab&gt;</code><br>
<code class="notranslate">&lt;Tab label="Регистрация"&gt;</code><br>
<code class="notranslate">{register}</code><br>
<code class="notranslate">&lt;/Tab&gt;</code><br>
<code class="notranslate">&lt;/Tabs&gt;</code><br>
<code class="notranslate">&lt;/div&gt;</code></p>