title: How to convert JSON to Html in a React App
body: <p>How to convert JSON to normal html with html elements in a react app?</p>
  <p><strong>Note that dangerouslySetInnerHTML can be dangerous if you do not know what is in the HTML string you are injecting</strong></p>
  <p>According to react docs -</p>
  <blockquote>
  <p>dangerouslySetInnerHTML is React’s replacement for using innerHTML in
  the browser DOM. In general, setting HTML from code is risky because
  it’s easy to inadvertently expose your users to a cross-site scripting
  (XSS) attack. So, you can set HTML directly from React, but you have
  to type out dangerouslySetInnerHTML and pass an object with a __html
  key, to remind yourself that it’s dangerous.</p>
  </blockquote>
  <p>I have created a code sandbox below:
  <a href="https://codesandbox.io/s/relaxed-sunset-tlmr2?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/relaxed-sunset-tlmr2?file=/src/App.js</a></p>
  <p>The output just renders as string instead of html elements.</p>
  <p>Here is my code:</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  
  const blocks = {
    time: 1602725895949,
    blocks: [
      {
        type: &quot;header&quot;,
        data: {
          text: &quot;This is a heading&quot;,
          level: 2
        }
      },
      {
        type: &quot;paragraph&quot;,
        data: {
          text: &quot;This is a paragraph&quot;
        }
      }
    ]
  };
  
  export default function App() {
    function convertToHtml({ blocks }) {
      console.log(blocks);
      var convertedHtml = &quot;&quot;;
      blocks.map((block) =&gt; {
        switch (block.type) {
          case &quot;header&quot;:
            convertedHtml += `&lt;h${block.data.level}&gt;${block.data.text}&lt;/h${block.data.level}&gt;`;
            break;
          case &quot;paragraph&quot;:
            convertedHtml += `&lt;p&gt;${block.data.text}&lt;/p&gt;`;
            break;
          default:
            console.log(&quot;Unknown block type&quot;, block.type);
            break;
        }
      });
  
      return &lt;React.Fragment&gt;{convertedHtml}&lt;/React.Fragment&gt;;
    }
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;JSON to html below&lt;/h1&gt;
        {convertToHtml(blocks)}
      &lt;/div&gt;
    );
  }
  </code></pre>