Bugfixes to key assignment

Type coersion bug and ID breaking assumption.

Names need to be wrapped in something unique since otherwise two unique siblings
can end up having IDs that are subsets of eachother.

src/core/ReactComponent.js

@@ -296,7 +296,7 @@ var ReactComponent = {
           if (child.length === 0) continue;
 
           if (targetArray === null) targetArray = [];
-          appendNestedChildren(i - 1, child, targetArray);
+          appendNestedChildren('' + (i - 1), child, targetArray);
 
         } else if (!isEmptyChild(child)) {
 

src/core/__tests__/ReactIdentity-test.js

@@ -53,8 +53,8 @@ describe('ReactIdentity', function() {
     React.renderComponent(instance, document.createElement('div'));
     var node = instance.getDOMNode();
     reactComponentExpect(instance).toBeDOMComponentWithChildCount(2);
-    checkId(node.childNodes[0], '.reactRoot[0].:0:first');
-    checkId(node.childNodes[1], '.reactRoot[0].:0:second');
+    checkId(node.childNodes[0], '.reactRoot[0].[0]{first}');
+    checkId(node.childNodes[1], '.reactRoot[0].[0]{second}');
   });
 
   it('should allow key property to express identity', function() {
@@ -67,8 +67,8 @@ describe('ReactIdentity', function() {
     React.renderComponent(instance, document.createElement('div'));
     var node = instance.getDOMNode();
     reactComponentExpect(instance).toBeDOMComponentWithChildCount(2);
-    checkId(node.childNodes[0], '.reactRoot[0].:apple');
-    checkId(node.childNodes[1], '.reactRoot[0].:banana');
+    checkId(node.childNodes[0], '.reactRoot[0].[apple]');
+    checkId(node.childNodes[1], '.reactRoot[0].[banana]');
   });
 
   it('should use instance identity', function() {
@@ -89,12 +89,12 @@ describe('ReactIdentity', function() {
     React.renderComponent(instance, document.createElement('div'));
     var node = instance.getDOMNode();
     reactComponentExpect(instance).toBeDOMComponentWithChildCount(3);
-    checkId(node.childNodes[0], '.reactRoot[0].:wrap1');
-    checkId(node.childNodes[0].firstChild, '.reactRoot[0].:wrap1.:squirrel');
-    checkId(node.childNodes[1], '.reactRoot[0].:wrap2');
-    checkId(node.childNodes[1].firstChild, '.reactRoot[0].:wrap2.:bunny');
-    checkId(node.childNodes[2], '.reactRoot[0].:2');
-    checkId(node.childNodes[2].firstChild, '.reactRoot[0].:2.:chipmunk');
+    checkId(node.childNodes[0], '.reactRoot[0].[wrap1]');
+    checkId(node.childNodes[0].firstChild, '.reactRoot[0].[wrap1].[squirrel]');
+    checkId(node.childNodes[1], '.reactRoot[0].[wrap2]');
+    checkId(node.childNodes[1].firstChild, '.reactRoot[0].[wrap2].[bunny]');
+    checkId(node.childNodes[2], '.reactRoot[0].[2]');
+    checkId(node.childNodes[2].firstChild, '.reactRoot[0].[2].[chipmunk]');
   });
 
   it('should let restructured components retain their uniqueness', function() {

src/core/__tests__/ReactMultiChildReconcile-test.js

@@ -42,10 +42,11 @@ var stripEmptyValues = function(obj) {
 
 /**
  * These children are wrapped in an array and therefore their keys are prefixed.
- * This relies on a tiny implementation detail of the rendering system.
+ * Their name is also wrapped in an prefix and suffix character. We strip those
+ * out. This relies on a tiny implementation detail of the rendering system.
  */
 var getOriginalKey = function(childName) {
-  return childName.substr(3);
+  return childName.substr(4, childName.length - 5);
 };
 
 /**

src/utils/__tests__/mapChildren-test.js

@@ -122,10 +122,10 @@ describe('mapChildren', function() {
       .instance();
 
     expect(mapFn.calls.length).toBe(3);
-    expect(mapFn).toHaveBeenCalledWith(kidOne, 'one', 0);
-    expect(mapFn).toHaveBeenCalledWith(kidTwo, 'two', 1);
-    expect(mapFn).toHaveBeenCalledWith(kidThree, 'three', 2);
+    expect(mapFn).toHaveBeenCalledWith(kidOne, '0:one', 0);
+    expect(mapFn).toHaveBeenCalledWith(kidTwo, '0:two', 1);
+    expect(mapFn).toHaveBeenCalledWith(kidThree, '0:three', 2);
     expect(rendered.props.children).not.toEqual(instance.props.children);
-    expect(rendered.props.children).toHaveKeys(['one', 'two', 'three']);
+    expect(rendered.props.children).toHaveKeys(['0:one', '0:two', '0:three']);
   });
 });

src/utils/flattenChildren.js

@@ -56,7 +56,7 @@ var flattenChildrenImpl = function(res, children, nameSoFar) {
       flattenChildrenImpl(
         res,
         child,
-        nameSoFar + ':' + escapedKey
+        nameSoFar + '[' + escapedKey + ']'
       );
     }
   } else {
@@ -80,7 +80,7 @@ var flattenChildrenImpl = function(res, children, nameSoFar) {
             flattenChildrenImpl(
               res,
               children[key],
-              nameSoFar + ':' + escapedKey
+              nameSoFar + '{' + escapedKey + '}'
             );
           }
         }