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 Wor...
Source: DEV Community
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:
![[Rust Guide] 1.0. Intro](https://media2.dev.to/dynamic/image/width=1200,height=627,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpfmwmnfjk5ssrdx7z3iq.png)
![[Rust Guide] 1.2. Basic Understanding of Rust and Printing "Hello World"](https://media2.dev.to/dynamic/image/width=1200,height=627,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa4jloljlx1yhq6elgq88.png)
![[Rust Guide] 1.1. Install Rust](https://media2.dev.to/dynamic/image/width=1200,height=627,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5rfmcepvjo9qdg5h2d9w.png)
