How to fix the dangerously SetInnerHTML did not match error in React
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.
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025