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.