<p dir="auto">as we all know,the render function return a html.The problem is, when i type space after 'return' and then connect HTML fragment,there is no problem.But there will be an error <code class="notranslate">Uncaught TypeError: Cannot read property 'getNativeNode' of null</code> when i type enter to generate a new line and connect HTML fragment.I also checkout this</p>
<blockquote>
<p dir="auto">Currently, in a component's render, you can only return one node; if you have, say, a list of divs to return, you must wrap your components within a div, span or any other component.</p>
<p dir="auto">Don'tforget that JSX compiles into regular JS; returning two functions doesn't really make syntactic sense. Likewise, don't put more than one child in a ternary.</p>
</blockquote>
<p dir="auto">So,how to understand this problem?</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>