<p dir="auto">I haven't found a duplicate issue, only this post <a href="https://groups.google.com/forum/#!searchin/reactjs/render$20multiple/reactjs/pHNJe8trFOg/J-zd4jxAkJ4J" rel="nofollow">https://groups.google.com/forum/#!searchin/reactjs/render$20multiple/reactjs/pHNJe8trFOg/J-zd4jxAkJ4J</a></p>
<p dir="auto">I have a valid use case and like to share it.</p>
<p dir="auto">I'm building a framework for storytelling based on react. Every single element is positioned fixed as I've written a custom layout engine and need full control over everything. My entry level structure looks something like this</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Story&gt;
    &lt;Grid /&gt;
    &lt;UI /&gt;
&lt;/Story&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">Story</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">Grid</span> /&gt;
    <span class="pl-kos">&lt;</span><span class="pl-ent">UI</span> /&gt;
<span class="pl-kos">&lt;/</span><span class="pl-ent">Story</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto"><code class="notranslate">&lt;Grid&gt;</code> renders all the actual items (<code class="notranslate">&lt;GridItem&gt;</code>) of the story (text, images, videos, etc.). <code class="notranslate">&lt;UI /&gt;</code> renders UI elements that are common to every story. For example a <code class="notranslate">&lt;VolumeControl&gt;</code> for controling the volume of audio/video items.</p>
<p dir="auto">If I'd render the structure as given above, this would be the result</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div&gt;
    &lt;div&gt;
        &lt;!--list of GridItems--&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;!--list of UI components--&gt;
    &lt;/div&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-c">&lt;!--list of GridItems--&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-c">&lt;!--list of UI components--&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Since everything is positioned fixed, this does not work. The UI layer covers everything, making it unusable (e.g. can't click on videos). That's why I'm currently forced to do the following in the <code class="notranslate">render</code> method of <code class="notranslate">Story</code></p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div&gt;
    &lt;Grid /&gt;
    &lt;VolumeControl /&gt;
    &lt;Navigation /&gt;
    &lt;ShareButtons /&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">Grid</span> /&gt;
    <span class="pl-kos">&lt;</span><span class="pl-ent">VolumeControl</span> /&gt;
    <span class="pl-kos">&lt;</span><span class="pl-ent">Navigation</span> /&gt;
    <span class="pl-kos">&lt;</span><span class="pl-ent">ShareButtons</span> /&gt;
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">This works but is ugly as I lose separation. I don't want the <code class="notranslate">Story</code> component to have to know about every UI component. Sth. like a virtual <code class="notranslate">&lt;Fragment&gt;</code> component that renders it's children without a wrapper element would solve the problem as I could return it from the <code class="notranslate">&lt;UI&gt;</code> component.</p>
<p dir="auto">I know this is a rare use-case, I'm rather talented at reaching the edge cases of every framework I touch.</p>
<p dir="auto">Funny how writing down these things sometimes magically makes your brain do useful stuff. I found another workaround. I'm using <code class="notranslate">visiblity:none</code> on the UI layer and <code class="notranslate">visibility:visible</code> on the UI components. But it's a hack, nothing more.</p>
<hr>
<h2 dir="auto">Note from maintainers:</h2>
<p dir="auto">We know this is an issue and we know exactly what set of problem can be solved. We want this too but it is a <em>hard problem</em> with our current architecture. Additional comments expressing desire for this feature are not helpful. Feel free to subscribe to the issue (there's button in the right hand column) but do not comment unless you are adding value to the discussion. "Me too" and "+1" are not valuable, nor are use cases that have already been written in the comments (e.g., we know that you can't put <code class="notranslate">&lt;tr&gt;</code> or <code class="notranslate">&lt;dd&gt;</code> elements with a <code class="notranslate">&lt;div&gt;</code>).</p>
<hr>
<p dir="auto">Consider the following:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var ManagePost = React.createClass({

  render: function() {
    var posts = this.props.posts

    var something;
    var somethingelse;

    var row = posts.map(function(post){
      return(
        &lt;div&gt;
          &lt;div className=&quot;col-md-8&quot;&gt;
          &lt;/div&gt;
          &lt;div className=&quot;cold-md-4&quot;&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    });

    return (
        {row}
    );
  }

});"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">ManagePost</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>

  <span class="pl-en">render</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">var</span> <span class="pl-s1">posts</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">posts</span>

    <span class="pl-k">var</span> <span class="pl-s1">something</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">somethingelse</span><span class="pl-kos">;</span>

    <span class="pl-k">var</span> <span class="pl-s1">row</span> <span class="pl-c1">=</span> <span class="pl-s1">posts</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">post</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
      <span class="pl-k">return</span><span class="pl-kos">(</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"col-md-8"</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"cold-md-4"</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
      <span class="pl-kos">)</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">return</span> <span class="pl-kos">(</span>
        <span class="pl-kos">{</span>row<span class="pl-kos">}</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">If you remove the <code class="notranslate">&lt;div&gt;&lt;/div&gt;</code> in the <code class="notranslate">map</code>, you get the following error: <em>Adjacent XJS elements must be wrapped in an enclosing tag</em></p>
<p dir="auto">it isn't till I re-add the surrounding, and rather pointless, divs that it compiles with out issue. I am running <strong>0.11.1</strong></p>
<p dir="auto">Is this being addressed? It adds extra, and again - IMO - useless and pointless html to the page, that while harming nothing - looks messy and unprofessional. Maybe I am just doing something wrong, please enlighten me if I am.</p>