title: How can I combine a React element and text inside a ternary?
body: <p>Normally if you have something like:</p>
  
  <pre><code>&lt;SomeComponent foo={bar} /&gt;
  </code></pre>
  
  <p>you can make it optional by using a ternary:</p>
  
  <pre><code>{bar ? &lt;SomeComponent foo={bar} /&gt; : null}
  </code></pre>
  
  <p>But what if the block you are starting with contains a component plus some text (a single space) and a variable, e.g.:</p>
  
  <pre><code>&lt;SomeComponent foo={bar} /&gt; {foobar}
  </code></pre>
  
  <p>Wrapping it in parentheses won't work:</p>
  
  <pre><code>{bar ? (&lt;SomeComponent foo={bar} /&gt; {foobar}) : null}
  </code></pre>
  
  <p>and in fact the only way I found to make it work was to wrap everything in another element:</p>
  
  <pre><code>{bar ? &lt;span&gt;&lt;SomeComponent foo={bar} /&gt; {foobar}&lt;/span&gt; : null}
  </code></pre>
  
  <p>Is there any other way to tell React that:</p>
  
  <pre><code>&lt;SomeComponent foo={bar} /&gt; {foobar}
  </code></pre>
  
  <p>is a discrete chunk, so that I can use it in a ternary (inside JS, not JSX, logic) ... without adding meaningless wrapper elements?</p>