[DevTools] Allow renaming Host Component props (#35735)

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

@@ -82,7 +82,12 @@ describe('editing interface', () => {
               shallow="initial"
             />
             ,
-            <input ref={inputRef} onChange={jest.fn()} value="initial" />
+            <input
+              ref={inputRef}
+              onChange={jest.fn()}
+              value="initial"
+              data-foo="test"
+            />
           </>,
         ),
       );
@@ -259,6 +264,14 @@ describe('editing interface', () => {
         },
         after: 'initial',
       });
+      renamePath(hostComponentID, ['data-foo'], ['data-bar']);
+      expect({
+        foo: inputRef.current.dataset.foo,
+        bar: inputRef.current.dataset.bar,
+      }).toEqual({
+        foo: undefined,
+        bar: 'test',
+      });
     });
 
     // @reactVersion >= 16.9

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

@@ -7874,17 +7874,20 @@ export function attach(
           }
           break;
         case 'props':
-          if (instance === null) {
+          switch (fiber.tag) {
-            if (typeof overridePropsRenamePath === 'function') {
+            case ClassComponent:
-              overridePropsRenamePath(fiber, oldPath, newPath);
+              fiber.pendingProps = copyWithRename(
-            }
+                instance.props,
-          } else {
+                oldPath,
-            fiber.pendingProps = copyWithRename(
+                newPath,
-              instance.props,
+              );
-              oldPath,
+              instance.forceUpdate();
-              newPath,
+              break;
-            );
+            default:
-            instance.forceUpdate();
+              if (typeof overridePropsRenamePath === 'function') {
+                overridePropsRenamePath(fiber, oldPath, newPath);
+              }
+              break;
           }
           break;
         case 'state':