Cómo arreglar el error `dangerouslySetInnerHTML` no coincidió en React

Descubra cómo solucioné el error "dangerouslySetInnerHTMLno coincidió ", en una aplicación React

Estaba tratando de imprimir el HTML contenido en un accesorio, usandodangerouslySetInnerHTML, mientras recibí este error en la consola del navegador:

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.

Download my free React Handbook


More react tutorials: