From 84806333283fba9281d0080d9fccfb857a705429 Mon Sep 17 00:00:00 2001
From: maltoze <maltoze@qq.com>
Date: Thu, 8 Apr 2021 16:26:51 +0800
Subject: [PATCH 1/2] add test case

---
 test/html-to-react-tests.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/test/html-to-react-tests.js b/test/html-to-react-tests.js
index 36fb332..c0cc02d 100644
--- a/test/html-to-react-tests.js
+++ b/test/html-to-react-tests.js
@@ -277,6 +277,15 @@ describe('Html2React', () => {
       assert.strictEqual(reactElem.props.onClick, 'alert(\'hello!\')');
     });
 
+    it('should return a valid HTML string with onclick attributes', function () {
+      const htmlInput = '<button onclick="alert(\'hello!\')">Hello</button>';
+
+      const reactElem = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactElem);
+
+      assert.strictEqual(htmlInput, reactHtml);
+    });
+
     it('should handle inputs with empty value attribute', function () {
       const htmlInput = '<input value="">';
 

From baffd3edfc0a75b15a52cf4534c0ab170f97aafb Mon Sep 17 00:00:00 2001
From: Arve Knudsen <arve.knudsen@gmail.com>
Date: Sun, 2 May 2021 10:39:55 +0200
Subject: [PATCH 2/2] Make sure event handlers are functions

Signed-off-by: Arve Knudsen <arve.knudsen@gmail.com>
---
 CHANGELOG.md                |  2 ++
 lib/utils.js                |  3 +++
 test/html-to-react-tests.js | 14 +++-----------
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 14bfcba..f05aa3f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Master/Unreleased
 
+- Make sure event handlers, f.ex. "onclick", are functions [#126](https://github.com/aknuds1/html-to-react/pull/126) ([aknuds1](https://github.com/aknuds1))
+
 ## [v1.4.6](https://github.com/aknuds1/html-to-react/tree/v1.4.6)
 
 - Handle boolean attributes differing from React's representation [\#132](https://github.com/aknuds1/html-to-react/pull/132) ([aknuds1](https://github.com/aknuds1))
diff --git a/lib/utils.js b/lib/utils.js
index 2bd8836..f62bfad 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -2,6 +2,7 @@
 const camelCase = require('lodash.camelcase');
 const toPairs = require('ramda/src/toPairs');
 const reduce = require('ramda/src/reduce');
+const startsWith = require('ramda/src/startsWith');
 const React = require('react');
 const includes = require('ramda/src/includes');
 const camelCaseAttrMap = require('./camel-case-attribute-names');
@@ -74,6 +75,8 @@ function createElement(node, index, data, children) {
         key = 'className';
       } else if (key === 'for') {
         key = 'htmlFor';
+      } else if (startsWith('on', key)) {
+        value = Function(value);
       }
 
       if (includes(key, booleanAttrs) && (value || '') === '') {
diff --git a/test/html-to-react-tests.js b/test/html-to-react-tests.js
index c0cc02d..02553a1 100644
--- a/test/html-to-react-tests.js
+++ b/test/html-to-react-tests.js
@@ -270,20 +270,12 @@ describe('Html2React', () => {
     });
 
     it('should handle onclick attributes', function () {
-      const htmlInput = '<button onclick="alert(\'hello!\')">Hello</button>';
+      const htmlInput = `<button onclick="alert('hello!')">Hello</button>`;
 
       const reactElem = parser.parse(htmlInput);
 
-      assert.strictEqual(reactElem.props.onClick, 'alert(\'hello!\')');
-    });
-
-    it('should return a valid HTML string with onclick attributes', function () {
-      const htmlInput = '<button onclick="alert(\'hello!\')">Hello</button>';
-
-      const reactElem = parser.parse(htmlInput);
-      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactElem);
-
-      assert.strictEqual(htmlInput, reactHtml);
+      assert.strictEqual(typeof reactElem.props.onClick, 'function');
+      assert.strictEqual(String(reactElem.props.onClick), String(Function(`alert('hello!')`)));
     });
 
     it('should handle inputs with empty value attribute', function () {