CODEWITHSUNDEEP
javascriptreactjs
dropWizard
dropWizard

Reputation: 3538

Rendering email with HTML/CSS in React

I'm fetching an email from gmail and grabbed the html with CSS markup. I'd like to render it in a React app, but react is interpreting it as a string vs html.

How do I tell react to render the HTML/CSS?

var AnotherComponent = React.crateClass({
  render: function() {
    return (
      <div>{this.props.html_email}</div>
    )
  }
})

var Test = React.createClass({
  render: function() {
    return (
      <AnotherComponent html_email = {this.props.html_body} />
    )
  }
})

In this case, html_body is 

<div><p style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt;" data-mce-style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-family: Arial; color: #222222; vertical-align: baseline; white-space: pre-wrap;" data-mce-style="font-family: Arial; color: #222222; vertical-align: baseline; white-space: pre-wrap;">SOME TEXT</span></p><br><p style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt;" data-mce-style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-family: Arial; color: #222222; vertical-align: baseline; white-space: pre-wrap;" data-mce-style="font-family: Arial; color: #222222; vertical-align: baseline; white-space: pre-wrap;">

It is showing all of the html as a string vs just SOME TEXT

Upvotes: 0

Views: 1857

Answers (2)

Przemysław Zalewski
Przemysław Zalewski

Reputation: 3986

Alternatively to @Piotr's solution you can parse the HTML and render it on your own. You should only render subset of valid tags in order to prevent nasty XSS attacks.

You can also use some existing solutions like react-html-parser or other HTML parsers.

Upvotes: 0

Piotr Sołtysiak
Piotr Sołtysiak

Reputation: 1006

It does because you pass it like this. If you really need to do it, you should do:

var AnotherComponent = React.crateClass({
  render: function() {
    return (
      <div dangerouslySetInnerHTML={{__html: this.props.html_email}}</div>
    )
  }
})

But you shouldn't. From docs:

In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a cross-site scripting (XSS) attack

read more

Upvotes: 2

Related Questions