Update replace method with additional key parameter

remarkablemark · remarkablemark · commit 226cc15285e9 · 2016-08-29T12:41:18.000-04:00
The `replace` method now has 2 parameters: 1. domNode - The object describing the DOM node. 2. key - The array index. The `key` parameter was added because if the element had siblings, then the replaced React element should have a unique "key" prop or else React will display a warning: > Warning: Each child in an array or iterator should have a > unique "key" prop. See https://fb.me/react-warning-keys for > more information. Updated the mock data for complex html and used the `key` parameter to fix a test.
diff --git a/lib/dom-to-react.js b/lib/dom-to-react.js
@@ -28,7 +28,7 @@ function domToReact(nodes, options) {
 
         // replace with custom React element (if applicable)
         if (isReplacePresent) {
-            replacement = options.replace(node);
+            replacement = options.replace(node, i); // i = key
 
             if (React.isValidElement(replacement)) {
                 result.push(replacement);
@@ -69,7 +69,7 @@ function domToReact(nodes, options) {
             continue;
         }
 
-        // specify a `key` prop if returning an array
+        // specify a "key" prop if element has siblings
         // https://fb.me/react-warning-keys
         if (len > 1) {
             props.key = i;
diff --git a/test/data.json b/test/data.json
@@ -4,7 +4,7 @@
     "multiple": "<p>foo</p><p>bar</p>",
     "nested": "<div><p>foo <em>bar</em></p></div>",
     "attributes": "<hr id=\"foo\" class=\"bar baz\" style=\"background: #fff; text-align: center;\" data-foo=\"bar\" />",
-    "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>",
+    "complex": "<html><head><meta charset=\"utf-8\"/><title>Title</title><link rel=\"stylesheet\" href=\"style.css\"/></head><body><header id=\"header\">Header</header><h1 style=\"color:#000;font-size:42px;\">Heading</h1><hr/><p>Paragraph</p><img src=\"image.jpg\"/><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\"/>",
diff --git a/test/html-to-react.js b/test/html-to-react.js
@@ -77,15 +77,15 @@ describe('html-to-react', function() {
             it('overrides the element if replace is valid', function() {
                 var html = data.html.complex;
                 var reactElement = Parser(html, {
-                    replace: function(node) {
+                    replace: function(node, key) {
                         if (node.name === 'title') {
-                            return React.createElement('meta', { charSet: 'utf-8' });
+                            return React.createElement('title', { key: key }, 'Replaced Title');
                         }
                     }
                 });
                 assert.equal(
                     helpers.render(reactElement),
-                    html.replace('<title>Title</title>', '<meta charset="utf-8"/>')
+                    html.replace('<title>Title</title>', '<title>Replaced Title</title>')
                 );
             });
 
