Merge pull request facebook#2388 from spicyj/null-key

Support but warn on key={null}

Author: sophiebits

src/core/ReactElement.js

@@ -137,7 +137,16 @@ ReactElement.createElement = function(type, config, children) {
 
   if (config != null) {
     ref = config.ref === undefined ? null : config.ref;
-    key = config.key === undefined ? null : '' + config.key;
+    if (__DEV__) {
+      warning(
+        config.key !== null,
+        'createElement(...): Encountered component with a `key` of null. In ' +
+        'a future version, this will be treated as equivalent to the string ' +
+        '\'null\'; instead, provide an explicit key or use undefined.'
+      );
+    }
+    // TODO: Change this back to `config.key === undefined`
+    key = config.key == null ? null : '' + config.key;
     // Remaining properties are added to a new props object
     for (propName in config) {
       if (config.hasOwnProperty(propName) &&

src/core/__tests__/ReactElement-test.js

@@ -81,6 +81,22 @@ describe('ReactElement', function() {
     expect(element.props).toEqual({foo:'56'});
   });
 
+  it('treats a null key as omitted but warns', function() {
+    spyOn(console, 'warn');
+    var element = React.createFactory(ComponentFactory)({
+      key: null,
+      foo: '56'
+    });
+    expect(element.type).toBe(ComponentClass);
+    expect(element.key).toBe(null);  // as opposed to string 'null'
+    expect(element.ref).toBe(null);
+    expect(element.props).toEqual({foo:'56'});
+    expect(console.warn.argsForCall.length).toBe(1);
+    expect(console.warn.argsForCall[0][0]).toContain(
+      'will be treated as equivalent to the string \'null\''
+    );
+  });
+
   it('preserves the context on the element', function() {
     var Component = React.createFactory(ComponentFactory);
     var element;