React app rendering html entities such as ampersand as escaped

Question

I have a React app embedded in Wordpress page. It pulls content from a JSON api and displays it in various areas.

My problem is that all of the text content that c

Answer 1

HTML (including entities) will be rendered as a string when being rendered as an expression:

{htmlString}

In order to parse HTML, there is dangerouslySetInnerHTML prop:

<span dangerouslySetInnerHTML={{__html: htmlString }} />

As the name says, it's unsafe and should be generally avoided. If a string comes from untrusted source or a source that could be exploited, malicious code can be rendered to a client.

The preferable way is to decode entities specifically, e.g. with html-entities:

import { Html5Entities } from 'html-entities';
const htmlEntities = new Html5Entities();

...

{htmlEntities.decode(htmlString)}

The problem could be avoided by not storing HTML entities in the first place if possible.