title: React dangerouslySetInnerHTML Inside Fragment
body: <p>I have a use-case where I need to format some text in React and also render HTML.</p>
  
  <p>Here is an example of what I'm currently trying to achieve:</p>
  
  <pre><code>import React, {Fragment} from "react";
  import {renderToString} from "react-dom/server";
  
  function FormatText(props) {
    const lines = props.children.split('\n');
  
    return lines.map((line, index) =&gt; (
      &lt;Fragment key={index}&gt;
        {line}{index !== lines.length - 1 &amp;&amp; &lt;br/&gt;}
      &lt;/Fragment&gt;
    ));
  }
  
  const content = {
    first: 'This is some text\nwith new\n\nline characters - 1',
    second: 'This is some text\nwith new\n\nline &lt;strong&gt;characters - &lt;sup&gt;2&lt;/sup&gt;&lt;/strong&gt;',
  };
  
  function App() {
    return (
      &lt;ol&gt;
        &lt;li&gt;
          &lt;FormatText&gt;{content.first}&lt;/FormatText&gt;
        &lt;/li&gt;
        &lt;li dangerouslySetInnerHTML={{
          __html: renderToString(&lt;FormatText&gt;{content.second}&lt;/FormatText&gt;)
        }}/&gt;
      &lt;/ol&gt;
    )
  }
  </code></pre>
  
  <p>As you can see, I have some <code>content</code> which contains <code>\n</code> characters and HTML. Calling the <code>renderToString</code> function converts the HTML into encoded characters, which means the HTML is not rendered properly.</p>
  
  <p>Is there a way to render HTML inside a react fragment.</p>
  
  <p>Ideally I wanted to do the following (but it doesn't):</p>
  
  <pre><code>function FormatText(props) {
    const lines = props.children.split('\n');
  
    return lines.map((line, index) =&gt; (
      &lt;Fragment key={index} dangerouslySetInnerHTML={{__html: renderToString(
          &lt;Fragment&gt;
            {line}{index !== lines.length - 1 &amp;&amp; &lt;br/&gt;}
          &lt;/Fragment&gt;
        )}}&gt;
      &lt;/Fragment&gt;
    ));
  }
  </code></pre>