Render HTML tags properly in React

Question

I have to create a text module in React, i'm using JSX too; I will receive the data from a JSON file. For example:

{ "text-data": "text": " Hello world " }

I tried to do something like this in my module:  {this.props.textData.text}

When I try to render this in my JSX file, it show as plain text with the tags included. I've been researching and I found that I could use this function "Dangerously Set innerHTML" but it's not recommended because it can cause an XSS attack. I read here other answers about this, that say that using HTML entities work; but I can't make that work for now.

Can you provide more information and the relevant code. It is not entirely clear what you are asking. — alex
– alex, Commented Aug 2, 2016 at 20:43

Community · Accepted Answer · 2017-05-23 10:28:46Z

1

The dangerouslySetInnerHTML prop is there for cases like this. In effect, you're saying that you completely trust the html that you're outputting and that it's valid html. You would not want to use it for user input (unless absolutely necessary and thoroughly validated).

See the React documentation for more information. There is also a previous similar StackOverflow question.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Aug 2, 2016 at 21:05

Stephen Lyon

813 bronze badges

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

2 Comments

caro Over a year ago

Oh, thanks! I know that there are similar questions, sorry.

justdan23 Over a year ago

This is still a valid issue and I'm not so sure the "dangerouslySetInnerHTML" prop is the answer for the security reasons cited above. The situation where I find the need for it is with "/" in text where you need to inject a dynamic element.

Collectives™ on Stack Overflow

Render HTML tags properly in React

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related