title: Can I render multiple element in a ternary condition without else?
body: <p>I have the following code that allows me to retrieve a user's personal link on several social networks:</p>
  
  <pre><code>&lt;ul className="navbar-nav my-2 my-lg-0"&gt;
    {
      settings !== null &amp;&amp;
        &lt;li className="nav-item"&gt;
          &lt;a className="nav-link" href={settings.facebook.url}&gt;Facebook&lt;/a&gt;
        &lt;/li&gt;
    }
    {
      settings !== null &amp;&amp;
        &lt;li className="nav-item"&gt;
          &lt;a className="nav-link" href={settings.twitter.url}&gt;Articles&lt;/a&gt;
        &lt;/li&gt;
    }
  &lt;/ul&gt;
  </code></pre>
  
  <p>However, since the <code>settings</code> object is retrieved by an Ajax call to the database, this is asynchronous and I have to make sure that `settings exists before making it showing up some datas.</p>
  
  <p>My question is, since the following doesn't work:</p>
  
  <pre><code>&lt;ul className="navbar-nav my-2 my-lg-0"&gt;
    {
      settings !== null &amp;&amp;
        &lt;li className="nav-item"&gt;
          &lt;a className="nav-link" href={settings.facebook.url}&gt;Facebook&lt;/a&gt;
        &lt;/li&gt;
  
        &lt;li className="nav-item"&gt;
          &lt;a className="nav-link" href={settings.twitter.url}&gt;Articles&lt;/a&gt;
        &lt;/li&gt;
    }
  &lt;/ul&gt;
  </code></pre>
  
  <p>Is there any way to make one verification for multiple React elements?</p>
  
  <p>Thank you in advance</p>