title: How to sanitized HTML in React?
body: <p>I am trying to display HTML content on React front side.</p>
  <h2>Here is my input</h2>
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;Hello/&lt;p&gt;
  
  Aadafsf
  
  &lt;h1&gt;H1 in hello&lt;/h1&gt;
  </code></pre>
  <p>I write this from CKEditor from Admin side</p>
  <h2>This is the React result in front size</h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&amp;lt;p&amp;gt;Hello/&amp;lt;p&amp;gt;
  
  Aadafsf
  
  &amp;lt;h1&amp;gt;H1 in hello&amp;lt;/h1&amp;gt;</code></pre>
  </div>
  </div>
  </p>
  <h2>This is the result I would like</h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Hello/&lt;p&gt;
  
  Aadafsf
  
  &lt;h1&gt;H1 in hello&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>
  <h2>Here is what I tried so far</h2>
  <h3>1. Using <code>dompurify</code></h3>
  <pre class="lang-js prettyprint-override"><code>import {Parser} from &quot;html-to-react&quot;;
  import DOMPurify from &quot;dompurify&quot;;
  
  {Parser().parse(DOMPurify.sanitize(HTMLCONTENT))}
  </code></pre>
  <p><a href="https://i.stack.imgur.com/U5q2Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U5q2Z.png" alt="Screenshot of the output" /></a></p>
  <p>I tried this but I'm not getting the expected output.</p>
  <h3>2. Using <code>dangerouslySetInnerHTML</code></h3>
  <p>I have the below HTML content:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;This is Heading&lt;/h2&gt;&lt;p&gt;&amp;lt;p&amp;gt;&amp;lt;/p&amp;gt;&lt;/p&gt;&lt;p&gt;This is para.&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;This is Bold&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;ol&gt;&lt;li&gt;&lt;strong&gt;dwsfdf&lt;/strong&gt;&lt;/li&gt;&lt;li&gt;&lt;strong&gt;fdsfdf&lt;/strong&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;figure class="media"&gt;&lt;oembed url="https://youtu.be/rokGy0huYEA"&gt;&lt;/oembed&gt;&lt;/figure&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I used it like:</p>
  <pre><code>&lt;div dangerouslySetInnerHTML={{__html: HTMLCONTENT}} /&gt;;
  </code></pre>