title: server convert HTML to JSON and send it to client, how can the client (using React) render the JSON back to HTML and display it?
body: <p>I'v came across this situation and i can't figure it out (yet).</p>
  
  <p>I have this dummy data json file, which represent the response i got back from the server:</p>
  
  <p><strong>dummy-data.json</strong>:</p>
  
  <pre><code>{
     "#comment": "",
     "html": {
       "head": {
         "title": "Page Title"
       },
       "body": {
         "h1": "This is a Heading",
         "p": "This is a paragraph."
       }
     }
   }
  </code></pre>
  
  <p>I want to use this json and render the HTML back to the screen, like so:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Page Title&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;This is a Heading&lt;/h1&gt;
      &lt;p&gt;This is a paragraph.&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p>I'm using ReactJS + TS, so my App.tsx file currently looks like this:</p>
  
  <p><strong>App.tsx</strong>:</p>
  
  <pre><code>import React, { useEffect, useState } from "react";
  import "./App.css";
  import axios from "axios";
  
  export const App: React.FC = () =&gt; {
    const [html, setHtml] = useState("");
  
    const url = "./dummy-data.json";
  
    useEffect(() =&gt; {
      axios
        .get(url, {
          headers: {
            "X-poc": true
          }
        })
        .then(res =&gt; {
          setHtml(res.data);
        })
        .catch(err =&gt; console.log(err));
    }, []);
  
  
    return (
      &lt;div className="App"&gt;
        &lt;header className="App-header"&gt;
          &lt;p&gt;TEST PAGE&lt;/p&gt;
        &lt;/header&gt;
        &lt;div className="step-container"&gt;
            {/* This is a web component that in the end i wish to display the HTML inside of it */}
          &lt;step-wrapper url="this is a test prop" /&gt; 
        &lt;/div&gt;
        &lt;div dangerouslySetInnerHTML={{ __html: html}}&gt;&lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>What i'm missing here?</p>