Returning multiple elements in JSX : <p>I'm trying to return two links if the user is not logged in. Something like this:</p>

<pre><code>&lt;Nav&gt;
    {if(this.state.user) {
        &lt;NavItem onClick={this.logout}&gt;Log out&lt;/NavItem&gt;
    } else {
        &lt;NavItem onClick={this.login}&gt;Log in&lt;/NavItem&gt;
        &lt;NavItem onClick={this.register}&gt;Register&lt;/NavItem&gt;
    }
    }
&lt;/Nav&gt;
</code></pre>

<p>I know I can do this with a ternary operator:</p>

<pre><code>&lt;Nav&gt;
    {this.state.user ?
        &lt;NavItem onClick={this.logout}&gt;Log out&lt;/NavItem&gt;
        :
        &lt;NavItem onClick={this.login}&gt;Log in&lt;/NavItem&gt;
    }
&lt;/Nav&gt;
</code></pre>

<p>The problem is I want to render the two NavItems. I saw I can do it with a function, but when I try to do it in a function like this:</p>

<pre><code>myFunction(){
    return(
        &lt;NavItem onClick={this.login}&gt;Zaloguj się&lt;/NavItem&gt;
        &lt;NavItem onClick={this.login}&gt;Zaloguj się&lt;/NavItem&gt;
    )
}
</code></pre>

<p>It tells me that the second element is unreachable and breaks. So how can I return two elements? Stringifying the code doesn't help</p>
