dangerouslySetInnerHTML in React: Safe HTML Guide

The problem every React developer eventually faces Sooner or later, every React developer hits this situation: you have an HTML string, and you need to render it. Maybe it comes from a CMS like WordPress or Strapi. Maybe a rich text editor like TipTap or Quill produced it. Maybe you are rendering Markdown that has been converted to HTML. Whatever the source, you have a string containing HTML tags, and React is rendering it as literal text instead of markup. You try the obvious approach: function BlogPost ({ content }: { content : string }) { return < div > { content } </ div >; } // Renders: "<p>Hello <strong>world</strong></p>" as plain text React escapes the HTML entities and renders the raw string. This is not a bug. This is React protecting you. React escapes HTML by default because rendering arbitrary HTML is one of the most common sources of cross-site scripting (XSS) vulnerabilities in web applications. The React team made a deliberate design decision: the safe path should be th