React: Script tag not working when inserted using dangerouslySetInnerHTML

javascript html reactjs script-tag
meteors picture meteors · Feb 24, 2016 · Viewed 44.3k times · Source

I'm trying to set html sent from my server to show inside a div using dangerouslySetInnerHTML property in React. I also have script tag inside it and use functions defined in same inside that html. I have made example of error in JSFiddle here.

This is test code:

var x = '<html><scr'+'ipt>alert("this.is.sparta");function pClicked() {console.log("p is clicked");}</scr'+'ipt><body><p onClick="pClicked()">Hello</p></body></html>';

var Hello = React.createClass({
  displayName: 'Hello',
  render: function() {
    return (<div dangerouslySetInnerHTML={{__html: x}} />);
  }
});

I checked and the script tag is added to DOM, but cannot call the functions defined within that script tag. If this is not the correct way is there any other way by which I can inject the script tag's content.

Answer

Cristofer Flores picture Cristofer Flores · Dec 12, 2019

I created a React component that works pretty much like dangerouslySetInnerHtml but additionally it executes all the js code that it finds on the html string, check it out, it might help you:

https://www.npmjs.com/package/dangerously-set-html-content

Related questions

Get form data in ReactJS

I have a simple form in my render function, like so: render : function() { return ( <form> <input type="text" name="email" placeholder="Email" /> <input type="password" name="password" placeholder="Password" /> <button type="button" onClick={…

Read More
Concatenating variables and strings in React

Is there a way to incorporate React's curly brace notation and an href tag? Say we have the following value in the state: {this.state.id} and the following HTML attributes on a tag: href="#demo1" id="demo1" Is there …

Read More
Render HTML string as real HTML in a React component

Here's what I tried and how it goes wrong. This works: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> This doesn't: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> The description property is just …

Read More