React app rendering html entities such as ampersand as escaped
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.