Implement HTML Entity Decode in react.js

Even though you can use dangerouslySetInnerHTML it's not really a good practice, and as stated by Marek Dorda it's a great thing for making your app XSS vulnerable.

A better solution would be to use the he library. https://github.com/mathiasbynens/he

This would be an example of how would your component look with it.

import he from 'he'

export class FullInfoMedia extends React.Component {
    render() {
        const renderHTML = (escapedHTML: string) => React.createElement("div", { dangerouslySetInnerHTML: { __html: escapedHTML } });

        return (
            <div>
                <div className="about-title">
                    <div className="container">
                        <div className="row">
                            <img className="center-block" src={this.props.about.image}/>
                            <h2>{this.props.about.title}</h2>
                            { he.decode(this.props.about.body) }
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

Also, if it were my codebase, I would most likely move the decoding to the API call, and in the component just consume the value that comes from the store

You can simply try this, it decodes text and then display.

<p dangerouslySetInnerHTML={{__html:"&amp;nbsp;"}}/>

You can use dangerouslySetInnerHTML, but be sure you render only your input, not users. It can be great way to XSS.

Example of using:

const renderHTML = (rawHTML: string) => React.createElement("div", { dangerouslySetInnerHTML: { __html: rawHTML } });

And then in a component:

{renderHTML("<p>&amp;nbsp;</p>")}