title: How to parse a String containing HTML to React Components
body: <p>I'm using this library: <a href="https://www.npmjs.com/package/html-to-react" rel="noreferrer"><code>html-to-react</code></a> as I found that it was possible to &quot;compile&quot; HTML as a String to React Components.</p>
  <p>We're doing a system based on widgets and they might change over time (i.e. add / remove / update / etc), so we're planning to send the widget HTML from the database to the front which is done using React.</p>
  <p>I've successfully done a simple widget using HTML, now I'm trying this widget to respond to click events, so I thought on adding <code>onclick=method()</code> method from HTML or <code>onClick={method}</code> from React. However I've not been able to get the desired output as I'm getting these errors in my browser's console.</p>
  <pre><code>Warning: Invalid event handler property `onclick`. React events use the camelCase naming convention, for example `onClick`.
      in label
      in span
      in div
  Warning: Invalid event handler property `onclick`. Did you mean `onClick`?
      in label
      in span
      in div
      in DireccionComponent (at App.js:51)
      in div (at App.js:50)
      in GridItem (created by ReactGridLayout)
      in div (created by ReactGridLayout)
      in ReactGridLayout (at App.js:49)
      in App (at index.js:11)
  </code></pre>
  <p>The code I'm using is the following:</p>
  <p><strong>App.js</strong></p>
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import DireccionComponent from './DireccionComponent.js';
  
  class App extends Component {
      render() {
          return (
              &lt;DireccionComponent /&gt;
          );
      }
  }
  
  export default App;
  </code></pre>
  <p><strong>DireccionComponent.js</strong></p>
  <pre><code>import React, {Component} from 'react';
  
  var ReactDOMServer = require('react-dom/server');
  var HtmlToReactParser = require('html-to-react').Parser;
  
  let htmlInput = ''
              +   '&lt;div&gt;'
              +       '&lt;center&gt;&lt;label className=&quot;title&quot;&gt;Widget&lt;/label&gt;&lt;/center&gt;'
              +       '&lt;span className=&quot;ui-float-label&quot;&gt;'
              +           '&lt;label htmlFor=&quot;float-input&quot; onClick={this.myFunction}&gt;Hello&lt;/label&gt;'
              +       '&lt;/span&gt;'
              +   '&lt;/div&gt;';
  
  var htmlToReactParser = new HtmlToReactParser();
  var reactElement = htmlToReactParser.parse(htmlInput);
  var reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement);
  
  class DireccionComponent extends Component {
      constructor(props) {
          super (props);
  
          this.myFunction = this.myFunction.bind(this);
      }
  
      render() {
          return (
              reactElement
          )
      }
  
      myFunction() {
          console.log('Hola');
          alert(&quot;Hola&quot;);
      }
  }
  
  export default DireccionComponent;
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;my-app&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;html-to-react&quot;: &quot;^1.3.3&quot;,
      &quot;primereact&quot;: &quot;^1.5.1&quot;,
      &quot;react&quot;: &quot;^16.3.2&quot;,
      &quot;react-dom&quot;: &quot;^16.3.2&quot;,
      &quot;react-dom-server&quot;: &quot;0.0.5&quot;,
      &quot;react-grid-layout&quot;: &quot;^0.16.6&quot;,
      &quot;react-scripts&quot;: &quot;1.1.4&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test --env=jsdom&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    }
  }
  </code></pre>
  <p>Is it possible to get an <code>alert</code> or something similar using the above library to parse HTML to React Components? If so, how could I do it? Or what am I doing wrong?</p>
  <hr />
  <h2>Edit</h2>
  <p>It doesn't have to be specifically the library I'm using, if there's another one you've worked with and done something similar, I'm open to receive this recommendations (Note, I'm not asking for a software or library, but how to call the <code>onClick</code> method inside the String containing my HTML or a workaround)</p>
  <hr />
  <h2>Edit 2</h2>
  <p>After trying something I found that removing this line:</p>
  <pre><code>var reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement);
  </code></pre>
  <p>Gets rid of one of the messages. The library uses that element to test if both the current HTML and the parsed one are the same. I didn't needed it for my case but that still leaves the current error in the console:</p>
  <pre><code> Warning: Invalid event handler property `onclick`. Did you mean `onClick`?
      in label
      in span
      in div
      in DireccionComponent (at App.js:47)
      in App (at index.js:11)
  </code></pre>
  <hr />
  <h2>Edit 3</h2>
  <p>After some investigation I found <a href="https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml" rel="noreferrer"><code>dangerousSetInnerHTML</code></a> in <a href="https://stackoverflow.com/a/23663555/2180785">this answer</a></p>
  <p>Then I tried to follow <a href="https://stackoverflow.com/a/30525148/2180785">this answer</a> an placing an <code>alert</code> inside my HTML as follows:</p>
  <pre><code>'&lt;label htmlFor=&quot;float-input&quot; onclick=&quot;alert(\'Hello\')&quot;&gt;Hello2&lt;/label&gt;'
  </code></pre>
  <p>And it triggered the <code>alert</code>, however if I declared <code>myFunction</code> like in the code below (notice I tried to declare it as a <code>function</code> outside the class, inside it and also as <code>var myFunction = function() { ... }</code> all together and separated):</p>
  <pre><code>import React, {Component} from 'react';
  
  var ReactDOMServer = require('react-dom/server');
  var HtmlToReactParser = require('html-to-react').Parser;
  
  let htmlInput = ''
              //+ '&lt;div&gt;'
              +       '&lt;center&gt;&lt;label className=&quot;title&quot;&gt;Widget&lt;/label&gt;&lt;/center&gt;'
              +       '&lt;span className=&quot;ui-float-label&quot;&gt;'
              +           '&lt;label htmlFor=&quot;float-input&quot; onclick=&quot;myFunction()&quot;&gt;Hello2&lt;/label&gt;'
              +       '&lt;/span&gt;'
              //+     '&lt;/div&gt;';
  
  var htmlToReactParser = new HtmlToReactParser();
  var reactElement = htmlToReactParser.parse(htmlInput);
  
  class DireccionComponent extends Component {
      constructor(props) {
          super (props);
  
          this.myFunction = this.myFunction.bind(this);
      }
  
      render() {
          return (
              &lt;div dangerouslySetInnerHTML={{__html: htmlInput}}&gt;
  
              &lt;/div&gt;
          )
      }
  
      myFunction() {
          console.log('Hola');
          alert(&quot;Hola&quot;);
      }
  }
  
  function myFunction() {
      console.log('Hola');
      alert(&quot;Hola&quot;);
  }
  
  export default DireccionComponent;
  </code></pre>
  <p>But this time I get a new error:</p>
  <pre><code>ReferenceError: myFunction is not defined[Learn More]
  </code></pre>
  <p>I found a similar question: <a href="https://stackoverflow.com/questions/47297441/handling-onclick-of-a-a-tag-inside-of-dangerouslysetinnerhtml-regular-html">Handling onClick of a &lt;a&gt; tag inside of dangerouslySetInnerHTML/regular html</a> with this problem, and tried to investigate a little more and found <a href="https://github.com/facebook/react/issues/3359#issuecomment-85922486" rel="noreferrer">this comment</a> which says that the events from the <code>dangerouslySetInnerHTML</code> won't be triggered this way and links to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit" rel="noreferrer">docs</a>.</p>
  <p>So, while this seemed to be a workaround when I got an <code>alert</code> when written directly from the <code>onclick</code> method, or probably I didn't do it in the correct way, so if someone with more experience could try it and clarify, would be great.</p>
  <hr />
  <h2>Edit 4</h2>
  <p>I found a way to show an <code>alert</code> in this way:</p>
  <ul>
  <li>Write the HTML as a String</li>
  <li>Set the HTML through <code>dangerouslySetInnerHTML</code></li>
  <li>On <code>componentDidMound()</code> function from React use pure Javascript to add <code>onclick</code> function to it.</li>
  <li>Success</li>
  </ul>
  <p>However, <strong>what we're trying to do is</strong>:</p>
  <ul>
  <li>Create some methods, for example: <code>addTwoNumbers</code> or something like that</li>
  <li>Send an <code>onclick</code> or <code>onClick</code> from within the HTML String calling <code>addTwoNumbers</code> function.</li>
  <li>Repeat everytime we need to add a new component that needs to use the <code>addTwoNumbers</code> method and just have to write the HTML for it, save it on the database and retrieve it and then just use it.</li>
  </ul>
  <p>Something like:</p>
  <pre><code>...
      &lt;label onClick={myFunction}&gt; My Label &lt;/label&gt;
  ...
  </code></pre>
  <p>Or as I said above:</p>
  <pre><code>...
      &lt;label onClick={addTwoNumbers}&gt; My Label &lt;/label&gt;
  ...
  </code></pre>
  <p>The code that allows me to get an <code>alert</code> is the following:</p>
  <pre><code>import React, {Component} from 'react';
  import Parser from 'html-react-parser';
  import {render} from 'react-dom';
  
  var ReactDOMServer = require('react-dom/server');
  var HtmlToReactParser = require('html-to-react').Parser;
  
  let htmlInput = ''
              //+ '&lt;div&gt;'
              +       '&lt;center&gt;&lt;label className=&quot;title&quot;&gt;Widget&lt;/label&gt;&lt;/center&gt;'
              +       '&lt;span className=&quot;ui-float-label&quot;&gt;'
              +           '&lt;label htmlFor=&quot;float-input&quot; id=&quot;myLabel&quot;&gt;Hello2&lt;/label&gt;'
              +       '&lt;/span&gt;'
              //+     '&lt;/div&gt;';
  
  var htmlToReactParser = new HtmlToReactParser();
  var reactElement = htmlToReactParser.parse(htmlInput);
  
  class DireccionComponent extends Component {
      constructor(props) {
          super (props);
  
          this.myFunction = this.myFunction.bind(this);
      }
  
      render() {
          return (
              &lt;div dangerouslySetInnerHTML={{__html: htmlInput}}&gt;
  
              &lt;/div&gt;
          )
      }
  
      componentDidMount() {
          console.log('DONE');
  
          let myLabel = document.getElementById(&quot;myLabel&quot;);
  
          myLabel.onclick = function() {
              alert();
              console.log('clicked');
          }
          console.log(myLabel);
      }
  
      myFunction() {
          console.log('Hola');
          alert(&quot;Hola&quot;);
      }
  }
  
  function myFunction() {
      console.log('Hola');
      alert(&quot;Hola&quot;);
  }
  
  export default DireccionComponent;
  </code></pre>
  <p>With this in mind, do you know any other way to do what I'm trying to do?</p>