fix: #285 react-css-modules causes modifying key property of the comp…

…onent children (#286)
gajus · Aug 10, 2018 · 982fcf5 · evisong · Sep 6, 2018 · gajus
1 parent 54b4367
commit 982fcf5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/src/linkClass.js b/src/linkClass.js
@@ -50,7 +50,7 @@ const linkElement = (element: ReactElement, styles: Object, configuration: Objec
   if (React.isValidElement(children)) {
     elementShallowCopy.props.children = linkElement(React.Children.only(children), styles, configuration);
   } else if (_.isArray(children) || isIterable(children)) {
-    elementShallowCopy.props.children = React.Children.map(children, (node) => {
+    elementShallowCopy.props.children = _.map(children, (node) => {
       if (React.isValidElement(node)) {
         // eslint-disable-next-line no-use-before-define
         return linkElement(React.Children.only(node), styles, configuration);

diff --git a/tests/linkClass.js b/tests/linkClass.js
@@ -141,6 +141,22 @@ describe('linkClass', () => {
         expect(subject.props.children[0].props).not.to.have.property('styleName');
         expect(subject.props.children[1].props).not.to.have.property('styleName');
       });
+      it('preserves original keys', () => {
+        let subject;
+
+        subject = <div>
+          <p key='1' styleName='foo' />
+          <p key='2' styleName='bar' />
+        </div>;
+
+        subject = linkClass(subject, {
+          bar: 'bar-1',
+          foo: 'foo-1'
+        });
+
+        expect(subject.props.children[0].key).to.equal('1');
+        expect(subject.props.children[1].key).to.equal('2');
+      });
     });
     context('when multiple descendants have styleName and are iterable', () => {
       it('assigns a generated className', () => {