¿Cómo puedo inyectar HTML directamente en un componente de React?

Una de las razones por las que se creó React es para evitar los ataques XSS (Cross-Site Scripting), impidiendo que un usuario pueda inyectar código HTML en la página.

Por ello, React al intentar evaluar un string que contiene HTML lo escapa automáticamente. Por ejemplo, si intentamos renderizar el siguiente string:

const html = "<h1>My title</h1>"

function App() {
  return <div>{html}</div>
}

Veremos que en lugar de renderizar el HTML, lo escapa:

<div>&lt;h1&gt;My title&lt;/h1&gt;</div>

Sin embargo, hay ocasiones en las que es necesario inyectar HTML directamente en un componente. Ya sea por traducciones que tenemos, porque viene el HTML desde el servidor y ya viene saneado, o por un componente de terceros.

Para ello, podemos usar la propiedad dangerouslySetInnerHTML:

const html = "<h1>My title</h1>"

function App() {
  return <div dangerouslySetInnerHTML={{ __html: html }} />
}

Ahora sí veremos el HTML renderizado:

<div><h1>My title</h1></div>

Como ves, el nombre ya nos indica que es una propiedad peligrosa y que debemos usarla con cuidado. Intenta evitarla siempre que puedas y sólo recurre a ella cuando realmente no tengas otra opción.