title: Element Push without closing tag JSX
body: <p>I want to execute the below recursive function, the problem is <code>ul</code> Since when the function is called I'm pushing a <code>ul</code> tag and at the end of <code>forEach</code> I'm closing it. Incase if I change <code>outputArray.push(&lt;ul&gt;)</code> with the closing <code>&lt;/ul&gt;</code> then it works fine, but that won't serve my purpose. </p>
  
  <p>Any way around it?</p>
  
  <p>Note : It is a recursive function.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function flatten(data, outputArray) {
        outputArray.push(&lt;ul&gt;)
          data.forEach(function (asset){
              if(asset.children.length) {
                outputArray.push(&lt;li&gt;&lt;button onClick={_ =&gt; this.appendAssets(asset.name)}&gt;{asset.name}&lt;/button&gt;&lt;/li&gt;);
                flatten(asset.children, outputArray);
              }
              else{
                outputArray.push(&lt;li&gt;&lt;button onClick={_ =&gt; this.appendAssets(asset.name)}&gt;{asset.name}&lt;/button&gt;&lt;/li&gt;);
              }
          });
        outputArray.push(&lt;/ul&gt;)
      }</code></pre>
  </div>
  </div>
  </p>