Make sure event handlers are functions

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))

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 || '') === '') {

test/html-to-react-tests.js

@@ -270,11 +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!\')');
+      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 () {