<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Probably neither, but I am stuck with this.</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
Rendering multiple rows in table that are expanded by the "parent" row is not possible due to  not being permitted in  and the absence of fragmentation</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via <a href="https://jsfiddle.net" rel="nofollow">https://jsfiddle.net</a> or similar (template: <a href="https://jsfiddle.net/reactjs/69z2wepo/" rel="nofollow">https://jsfiddle.net/reactjs/69z2wepo/</a>).</strong><br>
Here's to get an idea <a href="https://jsfiddle.net/69z2wepo/67419/" rel="nofollow">https://jsfiddle.net/69z2wepo/67419/</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
This is the expected behaviour, I guess, until Fiber lands. I am just looking for an explanation on how to achieve this.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
I am on 15.3.2 but probably all pre-fiber versions have this.</p>
<p dir="auto">Thanks for any help!</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>