<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>
<p dir="auto">I have a setup where log entries are written and stored in markdown plain text. Come time to render these in the browser, they're run through a markdown to HTML converter, and that gets rendered by the browser. In React, despite the fact that the code never works with HTML except at the very last step (edits occur on plain text, saving occurs on plain text, plain text in the props/state, etc) the only way to get this data loaded in is by using the cumbersome <code class="notranslate">dangerouslySetInnerHTML</code> attribute, even though this HTML is not human-generated in any way, and isn't "dynamic" in the traditional sense; it's just the snapshot HTML representation of my text, in the same way that the HTML that React generates is simply a snapshot representation of my component.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var MarkDown = React.createClass({
  render: function() {
    // completely transient data; It has no meaning outside of the render function
    var html = markdown.toHTML(this.props.text);
    return &lt;div className=&quot;post&quot; dangerouslySetInnerHTML={{__html: html }}&lt;/div&gt;;
  }
});"><pre class="notranslate"><code class="notranslate">var MarkDown = React.createClass({
  render: function() {
    // completely transient data; It has no meaning outside of the render function
    var html = markdown.toHTML(this.props.text);
    return &lt;div className="post" dangerouslySetInnerHTML={{__html: html }}&lt;/div&gt;;
  }
});
</code></pre></div>
<p dir="auto">Is there something available that doesn't "lie" about what is being done in this scenario, like a way to tell React that there are additional safe processors available, such as:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="React.registerContentTransformer(&quot;markdown&quot;, markdown.toHTML);

var MarkDown = React.createClass({
  render: function() {
    return &lt;div className=&quot;post&quot;&gt;{markdown: this.props.text}&lt;/div&gt;;
  }
});"><pre class="notranslate"><code class="notranslate">React.registerContentTransformer("markdown", markdown.toHTML);

var MarkDown = React.createClass({
  render: function() {
    return &lt;div className="post"&gt;{markdown: this.props.text}&lt;/div&gt;;
  }
});
</code></pre></div>
<p dir="auto">(or whatever syntax would work that makes it explicit we're not working with human-generated dynamic HTML content, but with rigidly transformed, syntactically-correct-unless-the-transformer-has-bugs output)</p>
<p dir="auto">edit: to further explain the motivation for this question/request, the <code class="notranslate">dangerouslySetInnerHTML</code> mechanism is great and we definitely need it for user-generated HTML strings. However, there should also be a way to extend the mechanism that exists inside the <code class="notranslate">render</code> function for transforming data that isn't HTML but can be snapshot-serialized to HTML (like React components themselves). An additional API for telling the JSX transformer that there are additional transformers available that can be used exclusively during render() using special curly bracket syntax would be close to ideal.</p>
<p dir="auto">People would still need to use <code class="notranslate">dangerouslySetInnerHTML</code> for regular HTML string data, but people who have data that isn't HTML at all, merely transiently transformable into HTML form, should not need to say "this HTML is dangerous"; it's only as dangerous as the transformer makes it, putting it on part with the JSX transformer itself (bugs notwithstanding, the resulting HTML should always be well formed and legal)</p>