Implement HTML Entity Decode in react.js

Question

I am outputting the text using API from the server, and I have an admin which has the html fields for facilitating filling the content. The issue in here that now the text displaying with html codes. How I can get rid of that undeeded html codes. I guess I have to use html entity decode? How I will implement that in react project? Below you see that the text illustrates not only text and html code.

  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>
                            {renderHTML(<p>{this.props.about.body}</p>)} 
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

Answer 1

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>")}