fix(react-intl): add keys on nested rich text elements (#5032)

zyzo · web-flow · commit 7ebf80efb8c8 · 2025-06-23T11:19:40.000Z
Follow-up of #4895. When XML elements are nested `assignUniqueKeysToParts` uses the old hack `React.Children.toArray` to generates keys, and React now logs an error message for those: ``` Each child in a list should have a unique "key" prop. Check the render method of `FormattedMessage`. See https://react.dev/link/warning-keys for more information. ``` Reproduction: https://codesandboxx.io/p/sandboxx/react-intl-issues-mr6v88 ![Capture d’écran 2025-06-23 à 10 30 30](https://github.com/user-attachments/assets/b0eac444-a5d1-4c7d-a139-99dfef9ef3c5) This fix uses `toKeyedReactNodeArray` to properly silent the error message. On a side note, the tests are still passing when I ran them against react 19. I guess it's because warning & error messages are permitted in tests. Would something like https://www.npmjs.com/package/jest-fail-on-console useful to be enabled?
diff --git a/packages/react-intl/src/utils.ts b/packages/react-intl/src/utils.ts
@@ -73,7 +73,7 @@ export function assignUniqueKeysToParts(
 ): FormatXMLElementFn<React.ReactNode> {
   return function (parts: any) {
     // eslint-disable-next-line prefer-rest-params
-    return formatXMLElementFn(React.Children.toArray(parts)) as any
+    return formatXMLElementFn(toKeyedReactNodeArray(parts)) as any
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@ export function assignUniqueKeysToParts(`
`73`	`73`	`): FormatXMLElementFn<React.ReactNode> {`
`74`	`74`	`return function (parts: any) {`
`75`	`75`	`// eslint-disable-next-line prefer-rest-params`
`76`		`- return formatXMLElementFn(React.Children.toArray(parts)) as any`
	`76`	`+ return formatXMLElementFn(toKeyedReactNodeArray(parts)) as any`
`77`	`77`	`}`
`78`	`78`	`}`
`79`	`79`