<p dir="auto">BottomNavigation throws an error if one child is null.</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">Since inline if with logical &amp;&amp; operator (<a href="https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator" rel="nofollow">https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator</a>) is a popular technique to achieve conditional rendering, I think that BottomNavigation should support this, instead of throwing an error.</p>
<p dir="auto">I think this could be achieved by filtering out children that are null at <a href="https://github.com/callemall/material-ui/blob/v1-beta/src/BottomNavigation/BottomNavigation.js#L66">https://github.com/callemall/material-ui/blob/v1-beta/src/BottomNavigation/BottomNavigation.js#L66</a> before mapping them.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">BottomNavigation throws an error if one child is null, such as is the case with inline if with logical &amp;&amp; operator for conditional rendering.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;BottomNavigation selectedIndex={0}&gt;
                  &lt;BottomNavigationItem
                    label=&quot;One: OK&quot;
                  /&gt;
                  &lt;BottomNavigationItem
                    label=&quot;Two: OK&quot;
                  /&gt;
                  {
                    condition &amp;&amp;
                    &lt;BottomNavigationItem
                      label=&quot;Three: Will throw error when condition is false&quot;
                    /&gt;
                  }
                &lt;/BottomNavigation&gt;"><pre class="notranslate"><code class="notranslate">&lt;BottomNavigation selectedIndex={0}&gt;
                  &lt;BottomNavigationItem
                    label="One: OK"
                  /&gt;
                  &lt;BottomNavigationItem
                    label="Two: OK"
                  /&gt;
                  {
                    condition &amp;&amp;
                    &lt;BottomNavigationItem
                      label="Three: Will throw error when condition is false"
                    /&gt;
                  }
                &lt;/BottomNavigation&gt;
</code></pre></div>
<ol dir="auto">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<h2 dir="auto">Context</h2>
    
<p dir="auto">I'm using conditional rendering to show select options in the bottom navigation.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>0.19.4</td>
</tr>
<tr>
<td>React</td>
<td>15.4.2</td>
</tr>
<tr>
<td>browser</td>
<td>Firefox 52.2.0 (64-bit), Version 60.0.3112.113 (Official Build) (64-bit)</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">Following the guide about server side rendering, I tried to use the <code class="notranslate">jss-default-preset</code> (as <code class="notranslate">jss-compose</code> and <code class="notranslate">jss-extend</code> are really awesome <g-emoji class="g-emoji" alias="1st_place_medal" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f947.png">🥇</g-emoji> )<br>
My server code is the following:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { create } from &quot;jss&quot;;
import jssPreset from &quot;jss-preset-default&quot;;

const jss = create(jssPreset());"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">create</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"jss"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">jssPreset</span> <span class="pl-k">from</span> <span class="pl-s">"jss-preset-default"</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">jss</span> <span class="pl-c1">=</span> <span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-en">jssPreset</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">When my server render the css, everything is fine. But for the client part, it does not execute the extra plugins (jss-extend and jss-compose).<br>
In the guide, the <a href="https://material-ui-next.com/guides/server-rendering/#the-client-side" rel="nofollow">client part</a> doesn't wrap the app with a <code class="notranslate">JssProvider</code>.<br>
So I don't know how to configure the client side to also use the <code class="notranslate">jss-preset-default</code>.</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>