0

This is my string that I want to render using reactDOM:

<!DOCTYPE html><html><head><title>Websockets 101</title><meta charset="utf-8"><link rel="shortcut icon" href="#"><link rel="stylesheet" href=
"https://fonts.googleapis.com/css?family=Roboto"><link rel="stylesheet" href="../stylesheets/styles.css" type="text/css"><link rel="stylesheet" href
="../stylesheets/projects_showcase.css" type="text/css"><link rel="stylesheet" href="../stylesheets/portfolio/portfolio.css" type="text/css"><!-- Bo
otstrap--><!--link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css")--></head><body id="portfolio"></bo
dy></html><div><h1>This is the story of a bread named brown</h1><p>bread was brown and was also named brown</p><p>thus he was brown</p></div>

I tried the following: (Only the render method is shown) where this.state.note_html is the html document string

        return (
                <div style={{background: 'red', width: '300px', height: '300px'}}>
                    <h1>Hello</h1>
                    <button onClick={this.fetchHTML}>Click me</button>
                    {this.state.note_html}
                </div>

I didn't work. It just rendered it as if it were a string.

Result: enter image description here

xing Zì
  • 391
  • 4
  • 16

1 Answers1

0

Try this:

return (
   <div style={{background: 'red', width: '300px', height: '300px'}}>
      <h1>Hello</h1>
      <button onClick={this.fetchHTML}>Click me</button>
      <div dangerouslySetInnerHTML={this.createMarkup()} />;
   </div> );
...
createMarkup() {
  return {__html: this.state.note_html};
}
abadalyan
  • 1,205
  • 8
  • 13
  • Can you manually replace `this.state.note_html` with the HTML string from the question and see if it works that way? – abadalyan Mar 24 '19 at 19:47
  • I apologize your answer works. I forgot to rebuild my bundle with webpack. I don't know who down voted you, but I just upvoted you. – xing Zì Mar 24 '19 at 19:50