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 [8fd963a](8fd963a)
facebook · May 31, 2024 · e2fbd8f · e2fbd8f
1 parent 5388c9f
commit e2fbd8f
Show file tree

Hide file tree

Showing 32 changed files with 78 additions and 68 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-aa3d6c0840357eb469df9bd1c20b201197ce3bdc
+8fd963a1e5ec89459cac27fb1d9ad193a0604110
diff --git a/compiled/facebook-www/REVISION_TRANSFORMS b/compiled/facebook-www/REVISION_TRANSFORMS
@@ -1 +1 @@
-aa3d6c0840357eb469df9bd1c20b201197ce3bdc
+8fd963a1e5ec89459cac27fb1d9ad193a0604110
diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js
@@ -22,7 +22,7 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
 }
-var ReactVersion = '19.0.0-www-classic-aa3d6c0840-20240530';
+var ReactVersion = '19.0.0-www-classic-8fd963a1e5-20240530';
 
 // Re-export dynamic flags from the www version.
 var dynamicFeatureFlags = require('ReactFeatureFlags');
@@ -2330,11 +2330,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/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js
@@ -22,7 +22,7 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
 }
-var ReactVersion = '19.0.0-www-modern-aa3d6c0840-20240530';
+var ReactVersion = '19.0.0-www-modern-8fd963a1e5-20240530';
 
 // Re-export dynamic flags from the www version.
 var dynamicFeatureFlags = require('ReactFeatureFlags');
@@ -2333,11 +2333,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/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js
@@ -684,4 +684,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-classic-aa3d6c0840-20240530";
+exports.version = "19.0.0-www-classic-8fd963a1e5-20240530";
diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js
@@ -684,4 +684,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-modern-aa3d6c0840-20240530";
+exports.version = "19.0.0-www-modern-8fd963a1e5-20240530";
diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js
@@ -688,7 +688,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-classic-aa3d6c0840-20240530";
+exports.version = "19.0.0-www-classic-8fd963a1e5-20240530";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled/facebook-www/React-profiling.modern.js b/compiled/facebook-www/React-profiling.modern.js
@@ -688,7 +688,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-modern-aa3d6c0840-20240530";
+exports.version = "19.0.0-www-modern-8fd963a1e5-20240530";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js
@@ -60,7 +60,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = '19.0.0-www-classic-aa3d6c0840-20240530';
+var ReactVersion = '19.0.0-www-classic-8fd963a1e5-20240530';
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;

diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js
@@ -60,7 +60,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = '19.0.0-www-modern-aa3d6c0840-20240530';
+var ReactVersion = '19.0.0-www-modern-8fd963a1e5-20240530';
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;

diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js
@@ -10640,7 +10640,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "19.0.0-www-classic-aa3d6c0840-20240530",
+    version: "19.0.0-www-classic-8fd963a1e5-20240530",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1370 = {
@@ -10671,7 +10671,7 @@ var internals$jscomp$inline_1370 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-classic-aa3d6c0840-20240530"
+  reconcilerVersion: "19.0.0-www-classic-8fd963a1e5-20240530"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1371 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js
@@ -10115,7 +10115,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "19.0.0-www-modern-aa3d6c0840-20240530",
+    version: "19.0.0-www-modern-8fd963a1e5-20240530",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1356 = {
@@ -10146,7 +10146,7 @@ var internals$jscomp$inline_1356 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-modern-aa3d6c0840-20240530"
+  reconcilerVersion: "19.0.0-www-modern-8fd963a1e5-20240530"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1357 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -31059,7 +31059,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-www-classic-aa3d6c0840-20240530';
+var ReactVersion = '19.0.0-www-classic-8fd963a1e5-20240530';
 
 function createPortal$1(children, containerInfo, // TODO: figure out the API for cross-renderer implementation.
 implementation) {

diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -30236,7 +30236,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-www-modern-aa3d6c0840-20240530';
+var ReactVersion = '19.0.0-www-modern-8fd963a1e5-20240530';
 
 function createPortal$1(children, containerInfo, // TODO: figure out the API for cross-renderer implementation.
 implementation) {

diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -17046,14 +17046,14 @@ function getCrossOriginStringAs(as, input) {
 }
 var isomorphicReactPackageVersion$jscomp$inline_1753 = React.version;
 if (
-  "19.0.0-www-classic-aa3d6c0840-20240530" !==
+  "19.0.0-www-classic-8fd963a1e5-20240530" !==
   isomorphicReactPackageVersion$jscomp$inline_1753
 )
   throw Error(
     formatProdErrorMessage(
       527,
       isomorphicReactPackageVersion$jscomp$inline_1753,
-      "19.0.0-www-classic-aa3d6c0840-20240530"
+      "19.0.0-www-classic-8fd963a1e5-20240530"
     )
   );
 Internals.findDOMNode = function (componentOrElement) {
@@ -17072,7 +17072,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1760 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-www-classic-aa3d6c0840-20240530",
+  version: "19.0.0-www-classic-8fd963a1e5-20240530",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2204 = {
@@ -17102,7 +17102,7 @@ var internals$jscomp$inline_2204 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-classic-aa3d6c0840-20240530"
+  reconcilerVersion: "19.0.0-www-classic-8fd963a1e5-20240530"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2205 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17606,4 +17606,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-www-classic-aa3d6c0840-20240530";
+exports.version = "19.0.0-www-classic-8fd963a1e5-20240530";
diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js
@@ -16409,14 +16409,14 @@ function getCrossOriginStringAs(as, input) {
 }
 var isomorphicReactPackageVersion$jscomp$inline_1724 = React.version;
 if (
-  "19.0.0-www-modern-aa3d6c0840-20240530" !==
+  "19.0.0-www-modern-8fd963a1e5-20240530" !==
   isomorphicReactPackageVersion$jscomp$inline_1724
 )
   throw Error(
     formatProdErrorMessage(
       527,
       isomorphicReactPackageVersion$jscomp$inline_1724,
-      "19.0.0-www-modern-aa3d6c0840-20240530"
+      "19.0.0-www-modern-8fd963a1e5-20240530"
     )
   );
 Internals.findDOMNode = function (componentOrElement) {
@@ -16435,7 +16435,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1726 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-www-modern-aa3d6c0840-20240530",
+  version: "19.0.0-www-modern-8fd963a1e5-20240530",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2195 = {
@@ -16465,7 +16465,7 @@ var internals$jscomp$inline_2195 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-modern-aa3d6c0840-20240530"
+  reconcilerVersion: "19.0.0-www-modern-8fd963a1e5-20240530"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2196 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16839,4 +16839,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-www-modern-aa3d6c0840-20240530";
+exports.version = "19.0.0-www-modern-8fd963a1e5-20240530";
diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js
@@ -17815,14 +17815,14 @@ function getCrossOriginStringAs(as, input) {
 }
 var isomorphicReactPackageVersion$jscomp$inline_1840 = React.version;
 if (
-  "19.0.0-www-classic-aa3d6c0840-20240530" !==
+  "19.0.0-www-classic-8fd963a1e5-20240530" !==
   isomorphicReactPackageVersion$jscomp$inline_1840
 )
   throw Error(
     formatProdErrorMessage(
       527,
       isomorphicReactPackageVersion$jscomp$inline_1840,
-      "19.0.0-www-classic-aa3d6c0840-20240530"
+      "19.0.0-www-classic-8fd963a1e5-20240530"
     )
   );
 Internals.findDOMNode = function (componentOrElement) {
@@ -17841,7 +17841,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1847 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-www-classic-aa3d6c0840-20240530",
+  version: "19.0.0-www-classic-8fd963a1e5-20240530",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -17885,7 +17885,7 @@ var devToolsConfig$jscomp$inline_1847 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-classic-aa3d6c0840-20240530"
+  reconcilerVersion: "19.0.0-www-classic-8fd963a1e5-20240530"
 });
 function ReactDOMRoot(internalRoot) {
   this._internalRoot = internalRoot;
@@ -18376,7 +18376,7 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-www-classic-aa3d6c0840-20240530";
+exports.version = "19.0.0-www-classic-8fd963a1e5-20240530";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js
@@ -17161,14 +17161,14 @@ function getCrossOriginStringAs(as, input) {
 }
 var isomorphicReactPackageVersion$jscomp$inline_1811 = React.version;
 if (
-  "19.0.0-www-modern-aa3d6c0840-20240530" !==
+  "19.0.0-www-modern-8fd963a1e5-20240530" !==
   isomorphicReactPackageVersion$jscomp$inline_1811
 )
   throw Error(
     formatProdErrorMessage(
       527,
       isomorphicReactPackageVersion$jscomp$inline_1811,
-      "19.0.0-www-modern-aa3d6c0840-20240530"
+      "19.0.0-www-modern-8fd963a1e5-20240530"
     )
   );
 Internals.findDOMNode = function (componentOrElement) {
@@ -17187,7 +17187,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1813 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-www-modern-aa3d6c0840-20240530",
+  version: "19.0.0-www-modern-8fd963a1e5-20240530",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -17231,7 +17231,7 @@ var devToolsConfig$jscomp$inline_1813 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-modern-aa3d6c0840-20240530"
+  reconcilerVersion: "19.0.0-www-modern-8fd963a1e5-20240530"
 });
 function ReactDOMRoot(internalRoot) {
   this._internalRoot = internalRoot;
@@ -17592,7 +17592,7 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-www-modern-aa3d6c0840-20240530";
+exports.version = "19.0.0-www-modern-8fd963a1e5-20240530";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js
@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require('react');
 var ReactDOM = require('react-dom');
 
-var ReactVersion = '19.0.0-www-classic-aa3d6c0840-20240530';
+var ReactVersion = '19.0.0-www-classic-8fd963a1e5-20240530';
 
 // This refers to a WWW module.
 var warningWWW = require('warning');

diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js
@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require('react');
 var ReactDOM = require('react-dom');
 
-var ReactVersion = '19.0.0-www-modern-aa3d6c0840-20240530';
+var ReactVersion = '19.0.0-www-modern-8fd963a1e5-20240530';
 
 // This refers to a WWW module.
 var warningWWW = require('warning');

diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js
@@ -5699,4 +5699,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "19.0.0-www-classic-aa3d6c0840-20240530";
+exports.version = "19.0.0-www-classic-8fd963a1e5-20240530";
diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js
@@ -5677,4 +5677,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "19.0.0-www-modern-aa3d6c0840-20240530";
+exports.version = "19.0.0-www-modern-8fd963a1e5-20240530";
diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js
@@ -31625,7 +31625,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-www-classic-aa3d6c0840-20240530';
+var ReactVersion = '19.0.0-www-classic-8fd963a1e5-20240530';
 
 function createPortal$1(children, containerInfo, // TODO: figure out the API for cross-renderer implementation.
 implementation) {

diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
@@ -30802,7 +30802,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-www-modern-aa3d6c0840-20240530';
+var ReactVersion = '19.0.0-www-modern-8fd963a1e5-20240530';
 
 function createPortal$1(children, containerInfo, // TODO: figure out the API for cross-renderer implementation.
 implementation) {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		aa3d6c0840357eb469df9bd1c20b201197ce3bdc
		8fd963a1e5ec89459cac27fb1d9ad193a0604110