Fix Missing key Validation in React.Children (#29675)

## Summary In #29088, the validation logic for `React.Children` inspected whether `mappedChild` — the return value of the map callback — has a valid `key`. However, this deviates from existing behavior which only warns if the original `child` is missing a required `key`. This fixes false positive `key` validation warnings when using `React.Children`, by validating the original `child` instead of `mappedChild`. This is a more general fix that expands upon my previous fix in #29662. ## How did you test this change? ``` $ yarn test ReactChildren-test.js ``` DiffTrain build for commit 8fd963a.
facebook · May 31, 2024 · 6de1973 · 6de1973
1 parent 916c781
commit 6de1973
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 40 deletions.
diff --git a/...source/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-dev.js b/...source/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-dev.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<2a25705fbbe871438d92d9d2f32bfccc>>
+ * @generated SignedSource<<51857d1396b3dbf84785badc368366e6>>
  */
 
 'use strict';
@@ -23471,7 +23471,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-rc-aa3d6c0840-20240530';
+var ReactVersion = '19.0.0-rc-8fd963a1e5-20240530';
 
 /*
  * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol

diff --git a/...ource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-prod.js b/...ource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-prod.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<3d4979729ff28e957f06f4727c93a3a4>>
+ * @generated SignedSource<<62a7ec5b565b86a1ca4e89a8b6dfa33a>>
  */
 
 "use strict";
@@ -9298,7 +9298,7 @@ var devToolsConfig$jscomp$inline_1047 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "19.0.0-rc-aa3d6c0840-20240530",
+  version: "19.0.0-rc-8fd963a1e5-20240530",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1234 = {
@@ -9329,7 +9329,7 @@ var internals$jscomp$inline_1234 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-rc-aa3d6c0840-20240530"
+  reconcilerVersion: "19.0.0-rc-8fd963a1e5-20240530"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1235 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/.../xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-profiling.js b/.../xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-profiling.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<14d991ff27c63a57f423b8548b3f34ad>>
+ * @generated SignedSource<<4ac434762822d6280d83c5cda5c1341b>>
  */
 
 "use strict";
@@ -9920,7 +9920,7 @@ var devToolsConfig$jscomp$inline_1130 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "19.0.0-rc-aa3d6c0840-20240530",
+  version: "19.0.0-rc-8fd963a1e5-20240530",
   rendererPackageName: "react-test-renderer"
 };
 (function (internals) {
@@ -9964,7 +9964,7 @@ var devToolsConfig$jscomp$inline_1130 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-rc-aa3d6c0840-20240530"
+  reconcilerVersion: "19.0.0-rc-8fd963a1e5-20240530"
 });
 exports._Scheduler = Scheduler;
 exports.act = act;

diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-dev.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<f2d4c82ad9e691aab626fdc02f31be82>>
+ * @generated SignedSource<<d88d69aa4000a33e09ec957377ca26f8>>
  */
 
 'use strict';
@@ -24,7 +24,7 @@ if (
 }
 var dynamicFlagsUntyped = require('ReactNativeInternalFeatureFlags');
 
-var ReactVersion = '19.0.0-rc-aa3d6c0840-20240530';
+var ReactVersion = '19.0.0-rc-8fd963a1e5-20240530';
 
 // Re-export dynamic flags from the internal module.
 var dynamicFlags = dynamicFlagsUntyped; // We destructure each value before re-exporting to avoid a dynamic look-up on
@@ -2011,11 +2011,16 @@ function mapIntoArray(children, array, escapedPrefix, nameSoFar, callback) {
         ) + '/' : '') + childKey);
 
         {
-          if (nameSoFar !== '' && mappedChild.key == null) {
-            // We need to validate that this child should have had a key before assigning it one.
-            if (!newChild._store.validated) {
-              // We mark this child as having failed validation but we let the actual renderer
-              // print the warning later.
+          // If `child` was an element without a `key`, we need to validate if
+          // it should have had a `key`, before assigning one to `mappedChild`.
+          // $FlowFixMe[incompatible-type] Flow incorrectly thinks React.Portal doesn't have a key
+          if (nameSoFar !== '' && _child != null && isValidElement(_child) && _child.key == null) {
+            // We check truthiness of `child._store.validated` instead of being
+            // inequal to `1` to provide a bit of backward compatibility for any
+            // libraries (like `fbt`) which may be hacking this property.
+            if (_child._store && !_child._store.validated) {
+              // Mark this child as having failed validation, but let the actual
+              // renderer print the warning later.
               newChild._store.validated = 2;
             }
           }

diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-prod.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<e286590d896e861b94dedb356ce7ecea>>
+ * @generated SignedSource<<4cc9db1802bfed728048b5d62af26b8b>>
  */
 
 "use strict";
@@ -604,4 +604,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-rc-aa3d6c0840-20240530";
+exports.version = "19.0.0-rc-8fd963a1e5-20240530";
diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-profiling.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<86e1e6d22f22b9f5dcddbb5c1ecb70ca>>
+ * @generated SignedSource<<c411b87ad31eb8487965b83bc03b44eb>>
  */
 
 "use strict";
@@ -608,7 +608,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-rc-aa3d6c0840-20240530";
+exports.version = "19.0.0-rc-8fd963a1e5-20240530";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION
@@ -1 +1 @@
-aa3d6c0840357eb469df9bd1c20b201197ce3bdc
+8fd963a1e5ec89459cac27fb1d9ad193a0604110
diff --git a/...rce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js b/...rce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<7e84a017485205dca1fd369d6e72a750>>
+ * @generated SignedSource<<561a3a04b6eef3ab839c5c6c89289a8f>>
  */
 
 'use strict';
@@ -26206,7 +26206,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-rc-aa3d6c0840-20240530';
+var ReactVersion = '19.0.0-rc-8fd963a1e5-20240530';
 
 /*
  * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol

diff --git a/...ce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js b/...ce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<29814ea154ff0145564ba37bc7c641e3>>
+ * @generated SignedSource<<43e2d3a64b19f02f63428367b171ef83>>
  */
 
 "use strict";
@@ -10551,7 +10551,7 @@ var roots = new Map(),
   devToolsConfig$jscomp$inline_1124 = {
     findFiberByHostInstance: getInstanceFromNode,
     bundleType: 0,
-    version: "19.0.0-rc-aa3d6c0840-20240530",
+    version: "19.0.0-rc-8fd963a1e5-20240530",
     rendererPackageName: "react-native-renderer",
     rendererConfig: {
       getInspectorDataForInstance: getInspectorDataForInstance,
@@ -10594,7 +10594,7 @@ var internals$jscomp$inline_1350 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-rc-aa3d6c0840-20240530"
+  reconcilerVersion: "19.0.0-rc-8fd963a1e5-20240530"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1351 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/...lat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js b/...lat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<e19877e45f15454540281567e670bc5b>>
+ * @generated SignedSource<<01c2ef8f2c76da87ab46ae77a3777990>>
  */
 
 "use strict";
@@ -11257,7 +11257,7 @@ var roots = new Map(),
   devToolsConfig$jscomp$inline_1205 = {
     findFiberByHostInstance: getInstanceFromNode,
     bundleType: 0,
-    version: "19.0.0-rc-aa3d6c0840-20240530",
+    version: "19.0.0-rc-8fd963a1e5-20240530",
     rendererPackageName: "react-native-renderer",
     rendererConfig: {
       getInspectorDataForInstance: getInspectorDataForInstance,
@@ -11313,7 +11313,7 @@ var roots = new Map(),
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-rc-aa3d6c0840-20240530"
+  reconcilerVersion: "19.0.0-rc-8fd963a1e5-20240530"
 });
 exports.createPortal = function (children, containerTag) {
   return createPortal$1(

diff --git a/...t/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js b/...t/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<aaf1d1cc950dfc6a86275919e7b1fc05>>
+ * @generated SignedSource<<df51ec7f297fbc971a9a0a5374b59a13>>
  */
 
 'use strict';
@@ -26562,7 +26562,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-rc-aa3d6c0840-20240530';
+var ReactVersion = '19.0.0-rc-8fd963a1e5-20240530';
 
 /*
  * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol

diff --git a/.../js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js b/.../js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<5c72fdc520d6c302c378849c7a7fde5a>>
+ * @generated SignedSource<<4a450db295f67ea9874238584c4f431f>>
  */
 
 "use strict";
@@ -10696,11 +10696,11 @@ function traverseOwnerTreeUp(hierarchy, instance) {
     traverseOwnerTreeUp(hierarchy, instance);
 }
 var isomorphicReactPackageVersion = React.version;
-if ("19.0.0-rc-aa3d6c0840-20240530" !== isomorphicReactPackageVersion)
+if ("19.0.0-rc-8fd963a1e5-20240530" !== isomorphicReactPackageVersion)
   throw Error(
     'Incompatible React versions: The "react" and "react-native-renderer" packages must have the exact same version. Instead got:\n  - react:                  ' +
       (isomorphicReactPackageVersion +
-        "\n  - react-native-renderer:  19.0.0-rc-aa3d6c0840-20240530\nLearn more: https://react.dev/warnings/version-mismatch")
+        "\n  - react-native-renderer:  19.0.0-rc-8fd963a1e5-20240530\nLearn more: https://react.dev/warnings/version-mismatch")
   );
 if (
   "function" !==
@@ -10750,7 +10750,7 @@ var roots = new Map(),
   devToolsConfig$jscomp$inline_1192 = {
     findFiberByHostInstance: getInstanceFromTag,
     bundleType: 0,
-    version: "19.0.0-rc-aa3d6c0840-20240530",
+    version: "19.0.0-rc-8fd963a1e5-20240530",
     rendererPackageName: "react-native-renderer",
     rendererConfig: {
       getInspectorDataForInstance: getInspectorDataForInstance,
@@ -10793,7 +10793,7 @@ var internals$jscomp$inline_1439 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-rc-aa3d6c0840-20240530"
+  reconcilerVersion: "19.0.0-rc-8fd963a1e5-20240530"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1440 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/...eact-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js b/...eact-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<b6669ae6e190e7f12b84b5b57ba715e7>>
+ * @generated SignedSource<<0667378dfc8028ec5ee4bb3c1517736f>>
  */
 
 "use strict";
@@ -11403,11 +11403,11 @@ function traverseOwnerTreeUp(hierarchy, instance) {
     traverseOwnerTreeUp(hierarchy, instance);
 }
 var isomorphicReactPackageVersion = React.version;
-if ("19.0.0-rc-aa3d6c0840-20240530" !== isomorphicReactPackageVersion)
+if ("19.0.0-rc-8fd963a1e5-20240530" !== isomorphicReactPackageVersion)
   throw Error(
     'Incompatible React versions: The "react" and "react-native-renderer" packages must have the exact same version. Instead got:\n  - react:                  ' +
       (isomorphicReactPackageVersion +
-        "\n  - react-native-renderer:  19.0.0-rc-aa3d6c0840-20240530\nLearn more: https://react.dev/warnings/version-mismatch")
+        "\n  - react-native-renderer:  19.0.0-rc-8fd963a1e5-20240530\nLearn more: https://react.dev/warnings/version-mismatch")
   );
 if (
   "function" !==
@@ -11457,7 +11457,7 @@ var roots = new Map(),
   devToolsConfig$jscomp$inline_1273 = {
     findFiberByHostInstance: getInstanceFromTag,
     bundleType: 0,
-    version: "19.0.0-rc-aa3d6c0840-20240530",
+    version: "19.0.0-rc-8fd963a1e5-20240530",
     rendererPackageName: "react-native-renderer",
     rendererConfig: {
       getInspectorDataForInstance: getInspectorDataForInstance,
@@ -11513,7 +11513,7 @@ var roots = new Map(),
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-rc-aa3d6c0840-20240530"
+  reconcilerVersion: "19.0.0-rc-8fd963a1e5-20240530"
 });
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
   computeComponentStackForErrorReporting: function (reactTag) {