fix(dom-to-react): allow custom keys for replacement

Author: NadiaIvaniuckovich

lib/dom-to-react.js

@@ -30,7 +30,9 @@ function domToReact(nodes, options) {
         // specify a "key" prop if element has siblings
         // https://fb.me/react-warning-keys
         if (len > 1) {
-          replacement = React.cloneElement(replacement, { key: i });
+          replacement = React.cloneElement(replacement, {
+            key: replacement.key || i
+          });
         }
         result.push(replacement);
         continue;

test/dom-to-react.js

@@ -159,6 +159,42 @@ describe('dom-to-react parser', () => {
     );
   });
 
+  it('does not modify keys for replacement if it have one', () => {
+    const html = [data.html.single, data.html.customElement].join('');
+
+    const reactElements = domToReact(htmlToDOM(html), {
+      replace: node => {
+        if (node.name === 'p') {
+          return React.createElement('p', {}, 'replaced foo');
+        }
+        if (node.name === 'custom-button') {
+          return React.createElement(
+            'custom-button',
+            {
+              key: 'meyKey',
+              class: 'myClass',
+              'custom-attribute': 'replaced value'
+            },
+            null
+          );
+        }
+      }
+    });
+
+    assert.deepEqual(reactElements, [
+      React.createElement('p', { key: 0 }, 'replaced foo'),
+      React.createElement(
+        'custom-button',
+        {
+          key: 'meyKey',
+          class: 'myClass',
+          'custom-attribute': 'replaced value'
+        },
+        null
+      )
+    ]);
+  });
+
   describe('when React <16', () => {
     const { PRESERVE_CUSTOM_ATTRIBUTES } = utilities;