fix: keep key in child elements, fixes #301

src/index.spec.js

@@ -725,6 +725,26 @@ describe('reactElementToJSXString(ReactElement)', () => {
     );
   });
 
+  it('reactElementToJSXString(<div aprop="test" key="yes"><div aprop="test" key="abc" /></div>', () => {
+    expect(
+      reactElementToJSXString(
+        <div aprop="test" key="yes">
+          <div aprop="test" key="abc" />
+        </div>
+      )
+    ).toEqual(
+      `<div
+  key="yes"
+  aprop="test"
+>
+  <div
+    key="abc"
+    aprop="test"
+  />
+</div>`
+    );
+  });
+
   it('reactElementToJSXString(<div>\\n  {null}\\n</div>', () => {
     const element = <div>{null}</div>;
 

src/parser/parseReactElement.js

@@ -117,9 +117,20 @@ const parseReactElement = (
   }
 
   const key = element.key;
-  if (typeof key === 'string' && key.search(/^\./)) {
-    // React automatically add key=".X" when there are some children
-    props.key = key;
+  if (typeof key === 'string') {
+    let originalKey = key;
+    // React automatically adds ".$" to the original key when the element is a child which has a key prop
+    if (key.indexOf('.$') === 0) {
+      originalKey = key.slice('.$'.length);
+    }
+    // React automatically adds key=".X" when there are some children
+    else if (key.indexOf('.') === 0) {
+      originalKey = null;
+    }
+
+    if (originalKey) {
+      props.key = originalKey;
+    }
   }
 
   const defaultProps = filterProps(element.type.defaultProps || {}, noChildren);