How to fix the dangerously SetInnerHTML did not match error in React
New Course Coming Soon:
Get Really Good at Git
Find out how I solved the error "`dangerouslySetInnerHTML` did not match", in a React application
I was trying to print the HTML contained in a prop, using dangerouslySetInnerHTML
, while I got this error in the browser console:
Warning: Prop `dangerouslySetInnerHTML` did not match.
This was a Next.js project, but the solution applies to any React code.
The string I was trying to print appeared for a while, and then disappeared. Quite strange!
It was even stranger when I tried to print a fixed HTML string, like this:
<p
dangerouslySetInnerHTML={{
__html: '<p>test</p>'
}}></p>
The error message is cryptic but after a while, I realized I could not set a p
tag inside another p
tag.
Switching to:
<div
dangerouslySetInnerHTML={{
__html: '<p>test</p>'
}}></div>
worked like a charm.
→ Get my React Beginner's Handbook
→ Read my full
React Tutorial
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X