Make sure props.children is null for void elements like <img>

remarkablemark · remarkablemark · commit 2a12730cc2a3 · 2016-08-29T11:28:59.000-04:00
The error came from the fact that `props.children` would always
be at minimum an empty array `[]`.

This causes the following error:
```js
ReactDOMServer.renderToString(
    Parser('&lt;img /&gt;')
);
// Invariant Violation: img is a void element tag and must neither
// have `children` nor use `dangerouslySetInnerHTML`.
```

The fix was to make `props.children` equal to `null` unless
there were actually more DOM nodes inside the array.

Add tests to confirm that void HTML element tags no longer throws
an error.
diff --git a/lib/dom-to-react.js b/lib/dom-to-react.js
@@ -59,8 +59,8 @@ function domToReact(nodes, options) {
             if (node.name === 'textarea' && node.children[0]) {
                 props.defaultValue = node.children[0].data;
 
-            } else if (node.children) {
-                // continue recursion of creating React elements
+            // continue recursion of creating React elements (if applicable)
+            } else if (node.children && node.children.length) {
                 children = domToReact(node.children, options);
             }
 
diff --git a/test/data.json b/test/data.json
@@ -7,6 +7,8 @@
     "complex": "<html><head><title>Title</title></head><body><header id=\"header\">Header</header><h1 style=\"color:#000;font-size:42px;\">Heading</h1><p>Paragraph</p><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>",
     "textarea": "<textarea>foo</textarea>",
     "script": "<script>alert(1 < 2);</script>",
+    "img": "<img src=\"http://stat.ic/img.jpg\" alt=\"Image\"/>",
+    "void": "<link/><meta/><img/><br/><hr/><input/>",
     "comment": "<!-- comment -->"
   },
   "svg": {
diff --git a/test/dom-to-react.js b/test/dom-to-react.js
@@ -5,6 +5,7 @@
  */
 var assert = require('assert');
 var React = require('react');
+var ReactDOMServer = require('react-dom/server');
 var htmlToDOMServer = require('../lib/html-to-dom-server');
 var domToReact = require('../lib/dom-to-react');
 var data = require('./data');
@@ -67,6 +68,22 @@ describe('dom-to-react parser', function() {
         );
     });
 
+    it('does not have `children` for void elements', function() {
+        var html = data.html.img;
+        var reactElement = domToReact(htmlToDOMServer(html));
+        assert(!reactElement.props.children);
+    });
+
+    it('does not throw an error for void elements', function() {
+        var html = data.html.void;
+        var reactElements = domToReact(htmlToDOMServer(html));
+        assert.doesNotThrow(function() {
+            ReactDOMServer.renderToStaticMarkup(
+                React.createElement('div', {}, reactElements)
+            );
+        });
+    });
+
     it('skips HTML comments', function() {
         var html = [data.html.single, data.html.comment, data.html.single].join('');
         var reactElements = domToReact(htmlToDOMServer(html));

Original file line number	Diff line number	Diff line change
`@@ -59,8 +59,8 @@ function domToReact(nodes, options) {`
`59`	`59`	`if (node.name === 'textarea' && node.children[0]) {`
`60`	`60`	`props.defaultValue = node.children[0].data;`
`61`	`61`
`62`		`- } else if (node.children) {`
`63`		`- // continue recursion of creating React elements`
	`62`	`+ // continue recursion of creating React elements (if applicable)`
	`63`	`+ } else if (node.children && node.children.length) {`
`64`	`64`	`children = domToReact(node.children, options);`
`65`	`65`	`}`
`66`	`66`