Specify "key" prop when creating an array of children

remarkablemark · remarkablemark · commit 2e27797c3067 · 2016-08-19T18:48:45.000-04:00
Fix the following in DOM to React parser: > Warning: Each child in an array should have a unique "key" prop. > See https://fb.me/react-warning-keys for more information. Add test to check for this use case with parsing multiple/sibling elements.
diff --git a/lib/dom-to-react.js b/lib/dom-to-react.js
@@ -32,6 +32,12 @@ function domToReact(nodes) {
                 children = domToReact(node.children);
             }
 
+            // specify a `key` prop if returning an array
+            // https://fb.me/react-warning-keys
+            if (len > 1) {
+                node.attribs.key = i;
+            }
+
             result.push(
                 React.createElement(
                     node.name,
diff --git a/test/data.json b/test/data.json
@@ -1,6 +1,7 @@
 {
   "html": {
     "single": "<p>foo</p>",
+    "multiple": "<p>foo</p><p>bar</p>",
     "complex": "<html><head><title>Title</title></head><body><header id=\"header\">Header</header><h1>Heading</h1><p>Paragraph</p><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>"
   }
 }
diff --git a/test/dom-to-react.js b/test/dom-to-react.js
@@ -24,4 +24,20 @@ describe('dom-to-react parser', function() {
         );
     });
 
+    it('converts multiple DOM nodes to React', function() {
+        var html = data.html.multiple;
+        var reactElements = domToReact(htmlToDOM(html));
+        reactElements.forEach(function(reactElement) {
+            assert(React.isValidElement(reactElement));
+            assert(reactElement.key);
+        });
+        assert.deepEqual(
+            reactElements,
+            [
+                React.createElement('p', { key: 0 }, 'foo'),
+                React.createElement('p', { key: 1 }, 'bar')
+            ]
+        );
+    });
+
 });

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"html": {`
`3`	`3`	`"single": "<p>foo</p>",`
	`4`	`+ "multiple": "<p>foo</p><p>bar</p>",`
`4`	`5`	`"complex": "<html><head><title>Title</title></head><body><header id=\"header\">Header</header><h1>Heading</h1><p>Paragraph</p><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>"`
`5`	`6`	`}`
`6`	`7`	`}`