Displaying HTML Body on a page using ReactJS

Question

Say I have the following code in my database (user input):

<html>
  <title>Test</title>
  <body>testing website</body>
</html>

And I fetched it correctly from my database using ReactJS. How can I display this in say: 'localhost:3000/play'? I don't want it to be rendered as raw data just like the code but I want it to actually render the html body as a website. (Title set to Test, and displays a small text: testing website). How can I do that in ReactJS? I already have /play configured and I just want to know how to display it there in the index.js file. I tried something like <div dangerouslySetInnerHTML={template} /> but it didn't work.

make sure your template is a json in form of {__html: 'First · Second'}. the __html attribute is important. — christopher_pk
– christopher_pk, Commented Jul 9, 2018 at 6:25
What I am doing is, const innerHtml = { __html: snapshot.val() } return(<div dangerouslySetInnerHTML={innerHtml} />) and when I log innerHtml I get this {__html: "<html> <title>Test</title> <body>testing website</body> </html>"} — Rayes
– Rayes, Commented Jul 9, 2018 at 6:38

Rayes · Accepted Answer · 2018-07-09 07:14:35Z

1

So, I fixed it with the following: In a separate function:

db.getHTMLBody(key).then(snapshot => { this.setState({ body: snapshot.val() }) })

then in the render:

 <div dangerouslySetInnerHTML={{ __html: this.state.body }} />

answered Jul 9, 2018 at 7:14

Rayes

9411 bronze badges

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

Comments

Midhun G S · Accepted Answer · 2018-07-09 07:04:09Z

0

Please try :

const innerHtml = { __html: escape(snapshot.val()) } 
return(<div dangerouslySetInnerHTML={innerHtml} />)

answered Jul 9, 2018 at 7:04

Midhun G S

9959 silver badges23 bronze badges

Collectives™ on Stack Overflow

Displaying HTML Body on a page using ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related