Fix Invariant Violation when a single element child is contained in an array.

Author: gajus

src/linkClass.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import makeConfiguration from './makeConfiguration';
+import _ from './utils';
 
 let linkClass;
 
@@ -53,14 +54,16 @@ linkClass = (element, styles = {}, userConfiguration) => {
     if (typeof element.props.children !== 'string') {
         childrenCount = React.Children.count(element.props.children);
 
-        if (childrenCount > 1) {
+        if (childrenCount > 1 || _.isArray(element.props.children)) {
             newChildren = React.Children.map(element.props.children, (node) => {
                 if (React.isValidElement(node)) {
                     return linkClass(node, styles, configuration);
                 } else {
                     return node;
                 }
             });
+            // https://github.com/facebook/react/issues/4723#issuecomment-135555277
+            newChildren = _.values(newChildren);
         } else if (childrenCount === 1) {
             newChildren = linkClass(React.Children.only(element.props.children), styles, configuration);
         }

src/utils.js

@@ -1,5 +1,9 @@
 import forEach from 'lodash/collection/forEach';
+import values from 'lodash/object/values';
+import isArray from 'lodash/lang/isArray';
 
 export default {
-    forEach
+    forEach,
+    values,
+    isArray
 };

test/linkClass.js

@@ -25,11 +25,41 @@ describe('linkClass', () => {
             expect(linkClass(<div className='foo'></div>)).to.deep.equal(<div className='foo'></div>);
         });
 
-        // Using array instead of object causes the following error:
-        // Warning: Each child in an array or iterator should have a unique "key" prop.
-        // Check the render method of _class. See https://fb.me/react-warning-keys for more information.
-        xit('does not affect element with multiple children', () => {
-            expect(linkClass(<div><p></p><p></p></div>)).to.deep.equal(<div><p></p><p></p></div>);
+        // Does not affect
+        it('does not affect element with a single children when that children is contained in an array', () => {
+            let outcome,
+                subject;
+
+            subject = React.createElement('div', null, [
+                React.createElement('p')
+            ]);
+            outcome = React.createElement('div', null, [
+                React.createElement('p')
+            ]);
+
+            expect(linkClass(subject)).to.deep.equal(outcome);
+        });
+
+        it('does not affect element with multiple children', () => {
+            // Using array instead of object causes the following error:
+            // Warning: Each child in an array or iterator should have a unique "key" prop.
+            // Check the render method of _class. See https://fb.me/react-warning-keys for more information.
+            // @see https://github.com/facebook/react/issues/4723#issuecomment-135555277
+            // expect(linkClass(<div><p></p><p></p></div>)).to.deep.equal(<div><p></p><p></p></div>);
+
+            let outcome,
+                subject;
+
+            subject = React.createElement('div', null, [
+                React.createElement('p'),
+                React.createElement('p')
+            ]);
+            outcome = React.createElement('div', null, [
+                React.createElement('p'),
+                React.createElement('p')
+            ]);
+
+            expect(linkClass(subject)).to.deep.equal(outcome);
         });
     });