<h3 dir="auto">Problem description</h3>
<p dir="auto">Loading steps dynamically seems to not be possible.<br>
I have an array of simple steps and I'm just trying to display them but when I do it I get an error</p>
<p dir="auto">In Stepper.js?724d:109</p>
<blockquote>
<p dir="auto">Uncaught TypeError: Cannot read property 'props' of null</p>
</blockquote>
<h3 dir="auto">Link to minimal working code that reproduces the issue</h3>
<p dir="auto">My code is something as simple as that:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var steps = [{stepLabel: 'a'}, {stepLabel: 'b'}];
&lt;Stepper&gt;
  {steps.map(step =&gt; {
    &lt;Step&gt;
      &lt;StepLabel&gt;{step.stepLabel}&lt;/StepLabel&gt;
    &lt;/Step&gt;;
  })}
&lt;/Stepper&gt;;"><pre class="notranslate"><code class="notranslate">var steps = [{stepLabel: 'a'}, {stepLabel: 'b'}];
&lt;Stepper&gt;
  {steps.map(step =&gt; {
    &lt;Step&gt;
      &lt;StepLabel&gt;{step.stepLabel}&lt;/StepLabel&gt;
    &lt;/Step&gt;;
  })}
&lt;/Stepper&gt;;
</code></pre></div>
<p dir="auto">It looks liks I cannot put the smallest amount of JS between  and , even and console.log() would make it fail. I have no idea why this would happen ...</p>
<h3 dir="auto">Versions</h3>
<p dir="auto">"material-ui": "^0.18.2",<br>
"react": "^15.5.4",</p>
<p dir="auto">Thanks a lot for your help ...</p>
<h3 dir="auto">Problem description</h3>
<p dir="auto">I have a responsive layout for <code class="notranslate">Stepper</code> in which if the media query is mobile size it will have a vertical orientation and if tablet and above will render a horizontal orientation. The problem is that <code class="notranslate">Stepper</code> component will issue an error if I will place a conditional statement on <code class="notranslate">StepContent</code> and if I don't an annoying <code class="notranslate">warning</code> will be shown on console. I know this will be removed in production but it shows an annoying <code class="notranslate">warning</code> when doing unit tests.</p>
<h3 dir="auto">Link to minimally-working code that reproduces the issue</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Stepper activeStep={stepIndex} orientation={isVertical ? 'vertical' : 'horizontal'} linear={false}&gt;
  &lt;Step&gt;
    &lt;StepButton onTouchTap={() =&gt; this.setState({stepIndex: 0})}&gt;User&lt;/StepButton&gt;
      {isVertical &amp;&amp;
        &lt;StepContent&gt;
          {getContent(stepIndex)}
        &lt;/StepContent&gt;
      }
  &lt;/Step&gt;
&lt;/Stepper&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Stepper</span> <span class="pl-c1">activeStep</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">stepIndex</span><span class="pl-kos">}</span> <span class="pl-c1">orientation</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">isVertical</span> ? <span class="pl-s">'vertical'</span> : <span class="pl-s">'horizontal'</span><span class="pl-kos">}</span> <span class="pl-c1">linear</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">false</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">Step</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">StepButton</span> <span class="pl-c1">onTouchTap</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">stepIndex</span>: <span class="pl-c1">0</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>User<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">StepButton</span><span class="pl-c1">&gt;</span>
      <span class="pl-kos">{</span><span class="pl-s1">isVertical</span> <span class="pl-c1">&amp;&amp;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">StepContent</span><span class="pl-c1">&gt;</span>
          <span class="pl-kos">{</span><span class="pl-en">getContent</span><span class="pl-kos">(</span><span class="pl-s1">stepIndex</span><span class="pl-kos">)</span><span class="pl-kos">}</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">StepContent</span><span class="pl-c1">&gt;</span>
      <span class="pl-kos">}</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Step</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Stepper</span><span class="pl-c1">&gt;</span></pre></div>
<h2 dir="auto">Error</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/6420838/22323260/aabceb0e-e3dc-11e6-81f0-c8b73b10364d.png"><img width="1225" alt="screen shot 2017-01-26 at 3 32 16 pm" src="https://cloud.githubusercontent.com/assets/6420838/22323260/aabceb0e-e3dc-11e6-81f0-c8b73b10364d.png" style="max-width: 100%;"></a></p>

<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: Latest</li>
<li>React: Latest</li>
<li>Browser: All</li>
</ul>