Fix CSSTransitionGroupChild wrong key

Author: cvle

src/csstransitiongroup.spec.tsx

@@ -58,6 +58,13 @@ describe("csstransitiongroup.tsx", () => {
       wrapper.setProps({ children: [<span />] });
       assert.isTrue((wrapper.find("CSSTransitionGroupChild").props() as any).mounted);
     });
+
+    it("should set key of CSSTransitionGroupChild to match keys of children", () => {
+      const wrapper = getWrapper(
+        { id: "abc", children: [<span key="mykey" />] },
+      );
+      assert.strictEqual((wrapper.find("CSSTransitionGroupChild").key()), ".$mykey");
+    });
   });
 
   describe("<CSSTransitionGroupChild>", () => {

src/csstransitiongroup.tsx

@@ -25,11 +25,11 @@ export class CSSTransitionGroup extends Component<CSSTransitionGroupProps, {}> {
     const { transitionAppear, children, ...rest } = this.props as any;
     return (
       <ReactTransitionGroup {...rest}>
-        {Children.map(children, (child, index) =>
+        {Children.map(children, (child: ReactElement<any>, index) =>
           <CSSTransitionGroupChild
             transitionAppear={transitionAppear}
             mounted={this.mounted}
-            key={index}>
+            key={child.key}>
             {child}
           </CSSTransitionGroupChild>,
         )}