<p dir="auto">I'm developing an app and want to dynamically load content into my application.  I am using flux, so there is a fairly defined pipeline for getting and managing data.</p>
<p dir="auto">What I want is to do something like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;MyRootComponent ...&gt;
  &lt;LoadSomethingInteresting ...&gt;
    &lt;ComponentThatUsesLoadedData /&gt;
  &lt;/LoadSomethingInteresting&gt;
&lt;/MyRootComponent&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">MyRootComponent</span> <span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">LoadSomethingInteresting</span> <span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">ComponentThatUsesLoadedData</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">LoadSomethingInteresting</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">MyRootComponent</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Currently, I get around this by using <code class="notranslate">&lt;div&gt;</code> as the rendered component, but this doesn't work well when I lazy load into a table:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;MyRoot&gt;
  &lt;table&gt;
    &lt;thead&gt;
      &lt;LoadSomeTheadData&gt;
        &lt;ComponentThatRendersTrAndTds /&gt;
      &lt;/LoadSomeTheadData&gt;
    &lt;/thead&gt;
  &lt;/table&gt;
&lt;/MyRoot&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">MyRoot</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">table</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">thead</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">LoadSomeTheadData</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">ComponentThatRendersTrAndTds</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">LoadSomeTheadData</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">thead</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">table</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">MyRoot</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Chome (but probably in other browsers) will push the loading div outside the table, which will force the browser to inject it's own corrected HTML, and React will lose it's root since the DOM gets modified without React's consent.</p>
<p dir="auto">So is there any way I can do something similar to:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  render: function() {
    return null; // won't work because this.props.children won't get rendered
    return this.props.children; // won't work because render can't return an array of elements
    return React.Children.only(this.props.children); // won't work because I may need more than one child rendered
  }"><pre class="notranslate">  render: <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">return</span> <span class="pl-c1">null</span><span class="pl-kos">;</span> <span class="pl-c">// won't work because this.props.children won't get rendered</span>
    <span class="pl-k">return</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">children</span><span class="pl-kos">;</span> <span class="pl-c">// won't work because render can't return an array of elements</span>
    <span class="pl-k">return</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Children</span><span class="pl-kos">.</span><span class="pl-en">only</span><span class="pl-kos">(</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">children</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// won't work because I may need more than one child rendered</span>
  <span class="pl-kos">}</span></pre></div>
<p dir="auto">I realize I can pass a React component to my loader and tell it to wrap any of it's content into that component, but I think that's quite messy.</p>
<p dir="auto"><strong>TL;DR</strong> I want a component that can do all the logic of the current component implementation, but without rendering itself (but still rendering children).</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>