How to append element to variable to be render in react
<p>Given a react component like below (<a href="https://jsfiddle.net/69z2wepo/28684/" rel="noreferrer">https://jsfiddle.net/69z2wepo/28684/</a>):</p>

<pre><code>var Hello = React.createClass({
  render: function() {
    let { cond, name } = this.props;
    let content, content2;
    if (cond){
      content = (&lt;div&gt;Hello { name } &lt;/div&gt;);
      content2 = (&lt;div&gt;content 2&lt;/div&gt;);
    }

    return (
      &lt;div&gt;
        { content }
        { content2 }
      &lt;/div&gt;
    )
  }
});

ReactDOM.render(
  &lt;Hello name="World" cond={ true } /&gt;,
  document.getElementById('container')
);
</code></pre>

<p>How can I achieve something like:</p>

<pre><code>content += (&lt;div&gt;content 2&lt;/div&gt;) //not working
</code></pre>

<p>and then render the content in a single content variable instead of both content and content 2?</p>