Comment réparer l'erreur `dangerouslySetInnerHTML` ne correspond pas à l'erreur dans React

Découvrez comment j'ai résolu l'erreur "dangerouslySetInnerHTMLne correspond pas ", dans une application React

J'essayais d'imprimer le HTML contenu dans un accessoire, en utilisantdangerouslySetInnerHTML, alors que j'ai cette erreur dans la console du navigateur:

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: