Skip to content

Commit

Permalink
Fix key Warning for Flattened Positional Children (#29662)
Browse files Browse the repository at this point in the history
## Summary

#29088 introduced a regression
triggering this warning when rendering flattened positional children:

> Each child in a list should have a unique "key" prop.

The specific scenario that triggers this is when rendering multiple
positional children (which do not require unique `key` props) after
flattening them with one of the `React.Children` utilities (e.g.
`React.Children.toArray`).

The refactored logic in `React.Children` incorrectly drops the
`element._store.validated` property in `__DEV__`. This diff fixes the
bug and introduces a unit test to prevent future regressions.

## How did you test this change?

```
$ yarn test ReactChildren-test.js
```

DiffTrain build for [72644ef](72644ef)
  • Loading branch information
yungsters committed May 30, 2024
1 parent 431d10b commit 4bebe8e
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 5 deletions.
2 changes: 1 addition & 1 deletion compiled/facebook-www/REVISION
Original file line number Diff line number Diff line change
@@ -1 +1 @@
38e3b23483bf7a612391cd617a8926aa1f3cf52e
72644ef2f2ec7a274f79f6b32320d62757521329
11 changes: 9 additions & 2 deletions compiled/facebook-www/React-dev.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ if (
) {
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
}
var ReactVersion = '19.0.0-www-classic-5a597884';
var ReactVersion = '19.0.0-www-classic-f4a35977';

// Re-export dynamic flags from the www version.
var dynamicFeatureFlags = require('ReactFeatureFlags');
Expand Down Expand Up @@ -1799,9 +1799,16 @@ function createElement(type, config, children) {
return ReactElement(type, key, ref, undefined, undefined, getOwner(), props);
}
function cloneAndReplaceKey(oldElement, newKey) {
return ReactElement(oldElement.type, newKey, // When enableRefAsProp is on, this argument is ignored. This check only
var clonedElement = ReactElement(oldElement.type, newKey, // When enableRefAsProp is on, this argument is ignored. This check only
// exists to avoid the `ref` access warning.
enableRefAsProp ? null : oldElement.ref, undefined, undefined, oldElement._owner, oldElement.props);

{
// The cloned element should inherit the original element's key validation.
clonedElement._store.validated = oldElement._store.validated;
}

return clonedElement;
}
/**
* Clone and return a new ReactElement using element as the starting point.
Expand Down
11 changes: 9 additions & 2 deletions compiled/facebook-www/React-dev.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ if (
) {
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
}
var ReactVersion = '19.0.0-www-modern-c9630b74';
var ReactVersion = '19.0.0-www-modern-85c20051';

// Re-export dynamic flags from the www version.
var dynamicFeatureFlags = require('ReactFeatureFlags');
Expand Down Expand Up @@ -1802,9 +1802,16 @@ function createElement(type, config, children) {
return ReactElement(type, key, ref, undefined, undefined, getOwner(), props);
}
function cloneAndReplaceKey(oldElement, newKey) {
return ReactElement(oldElement.type, newKey, // When enableRefAsProp is on, this argument is ignored. This check only
var clonedElement = ReactElement(oldElement.type, newKey, // When enableRefAsProp is on, this argument is ignored. This check only
// exists to avoid the `ref` access warning.
enableRefAsProp ? null : oldElement.ref, undefined, undefined, oldElement._owner, oldElement.props);

{
// The cloned element should inherit the original element's key validation.
clonedElement._store.validated = oldElement._store.validated;
}

return clonedElement;
}
/**
* Clone and return a new ReactElement using element as the starting point.
Expand Down

0 comments on commit 4bebe8e

Please sign in to comment.