[react@19] Using `<Trans />` with the `components` prop gives an error 'Each child in a list should have a unique "key" prop.'

[aiktb]

🐛 Bug Report

When using react@19, the Trans component throws an error. It has been confirmed that react@18 does not have this issue, and this error does not affect the normal operation of i18next.

This issue has a low priority because react@19 has not been officially released yet.

To Reproduce

https://stackblitz.com/edit/vitejs-vite-ufa4wi?file=src%2FApp.tsx,package.json

npm install react@rc react-dom@rc

The sample code is from the react-i18next document:

    <Trans
      i18nKey="myKey" // optional -> fallbacks to defaults if not provided
      defaults="hello <italic>beautiful</italic> <bold>{{what}}</bold>" // optional defaultValue
      values={{ what: 'world' }}
      components={{ italic: <i />, bold: <strong /> }}
    />

This error has been known to be eliminated using <i key="1"/>.

Expected behavior

No error.

Your Environment

    "i18next": "^23.16.1",
    "react-i18next": "^15.0.3",
    "react": "^19.0.0-rc-65a56d0e-20241020",
    "react-dom": "^19.0.0-rc-65a56d0e-20241020",

[adrai]

it's just a "warning"... if you like you can try to provide a PR that adds a key for the components, somewhere here: https://github.com/i18next/react-i18next/blob/master/src/TransWithoutContext.js#L365

[aiktb]

it's just a "warning"... if you like you can try to provide a PR that adds a key for the components, somewhere here: https://github.com/i18next/react-i18next/blob/master/src/TransWithoutContext.js#L365

    Object.keys(components).forEach((c) => {
+     components[c] = cloneElement(components[c], { key: c });
      const comp = components[c];

I tested this locally and it removes the warning, is this correct?

[adrai]

Maybe better like this?

Object.keys(components).forEach((c, i) => {
      if (!components[c].key) components[c] = cloneElement(components[c], { key: i });
      const comp = components[c];

[aiktb]

Maybe better like this?

Object.keys(components).forEach((c, i) => {
      if (!components[c].key) components[c] = cloneElement(components[c], { key: i });
      const comp = components[c];

Is it necessary to use index? Object.keys() can provide uniqueness even without index.

[adrai]

yes, that is also ok... but since the components can be defined as object or as array, I was thinking to streamline this to ensure it's always the index