Add guard to handle modified React elements with non-string keys (#17164

)

packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap

@@ -607,3 +607,8 @@ exports[`Store should properly handle a root with no visible nodes: 1: mount 1`]
 `;
 
 exports[`Store should properly handle a root with no visible nodes: 2: add host nodes 1`] = `[root]`;
+
+exports[`Store should properly serialize non-string key values: 1: mount 1`] = `
+[root]
+    <Child key="123">
+`;

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -837,4 +837,15 @@ describe('Store', () => {
     act(() => ReactDOM.unmountComponentAtNode(containerB));
     expect(store.supportsProfiling).toBe(false);
   });
+
+  it('should properly serialize non-string key values', () => {
+    const Child = () => null;
+
+    // Bypass React element's automatic stringifying of keys intentionally.
+    // This is pretty hacky.
+    const fauxElement = Object.assign({}, <Child />, {key: 123});
+
+    act(() => ReactDOM.render([fauxElement], document.createElement('div')));
+    expect(store).toMatchSnapshot('1: mount');
+  });
 });

packages/react-devtools-shared/src/backend/renderer.js

@@ -1157,7 +1157,12 @@ export function attach(
         : 0;
 
       let displayNameStringID = getStringID(displayName);
-      let keyStringID = getStringID(key);
+
+      // This check is a guard to handle a React element that has been modified
+      // in such a way as to bypass the default stringification of the "key" property.
+      let keyString = key === null ? null : '' + key;
+      let keyStringID = getStringID(keyString);
+
       pushOperation(TREE_OPERATION_ADD);
       pushOperation(id);
       pushOperation(elementType);