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

use dangerouslySetInnerHTML

Álvaro Touzón
– Álvaro Touzón

2017-02-21 08:03:33 +00:00
Commented Feb 21, 2017 at 8:03 — Álvaro Touzón
– Álvaro Touzón, Commented Feb 21, 2017 at 8:03

Marek Dorda · Accepted Answer · 2017-02-21 14:05:43Z

32

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

edited Feb 21, 2017 at 14:05

answered Feb 21, 2017 at 8:11

Marek Dorda

1,30518 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Feruza Over a year ago

so, for example the code should look like that the code in above. I just added, pls could u review

Feruza Over a year ago

but now it renders only word "[object Object]"

Marek Dorda Over a year ago

Input to the renderHTML function has to be string, not an object. You are calling <p>...</p>, but you need to call "<p>...</p>" (with quotes).

Feruza Over a year ago

for me worked this code dangerouslySetInnerHTML={{__html: this.props.about.body}}

Marek Dorda Over a year ago

I suppose your this.props.about.bodyis string, so simply {renderHTML(this.props.about.body)} is what you should use. If your props is not a string, you need to convert it.

|

Alejandro Vales · Accepted Answer · 2019-08-13 15:07:58Z

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

ravi · Accepted Answer · 2020-09-06 14:28:13Z

4

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

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

answered Sep 6, 2020 at 14:28

ravi

1,22017 silver badges29 bronze badges

Collectives™ on Stack Overflow

Implement HTML Entity Decode in react.js

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related