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

Answer 2

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

Answer 3

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

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