Self-closing components in translation strings should not attempt to replace the component's children

[bgmort]

🐛 Bug Report

This could be viewed as a bug or an improvement, but either way – I found an unexpected behavior that feels buggy to me. When interpolating a component with children, the children are replaced by the children from the translation, even when the component in the translation string is self-closing.

To Reproduce

Full example: https://codesandbox.io/p/sandbox/react-i18next-trans-component-interpolation-rf646l?file=%2Fsrc%2FApp.js%3A35%2C1-36%2C1

The gist:

<Trans i18nKey="key"
  defaults="interpolated <component/>"
  components={{
    component: <div style={style}>This component will be replaced</div>,
  }}
/>

Expected behavior

interpolated component's children should be preserved in the final translation

Your Environment

• runtime version: Chrome 119
• react-i18next version: 13.4.1
• i18next version: 23.7.6
• react version: 18.2.0
• os: Mac

[adrai]

Can you try with v13.5.0?

[bgmort]

Thanks for the quick response! 13.5.0 works in the codesandbox. I'll update my codebase.