title: How to append element to variable to be render in react
body: <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>