self-closing components in translation strings should not attempt to …

…replace the components children #1695

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 13.5.0
+
+- self-closing components in translation strings should not attempt to replace the component's children [1695](https://github.com/i18next/react-i18next/issues/1695)
+
 ### 13.4.1
 
 - types: use CustomInstanceExtenstions to extend reportNamespaces

react-i18next.js

@@ -512,6 +512,16 @@
       ns: namespaces
     };
     const translation = key ? t(key, combinedTOpts) : defaultValue;
+    if (components) {
+      Object.keys(components).forEach(c => {
+        const comp = components[c];
+        if (typeof comp.type === 'function' || !comp.props || !comp.props.children || translation.indexOf(`${c}/>`) < 0 && translation.indexOf(`${c} />`) < 0) return;
+        function Componentized() {
+          return React.createElement(React.Fragment, null, comp);
+        }
+        components[c] = React.createElement(Componentized, null);
+      });
+    }
     const content = renderNodes(components || children, translation, i18n, reactI18nextOptions, combinedTOpts, shouldUnescape);
     const useAsParent = parent !== undefined ? parent : reactI18nextOptions.defaultTransParent;
     return useAsParent ? React.createElement(useAsParent, additionalProps, content) : content;

src/TransWithoutContext.js

@@ -355,6 +355,24 @@ export function Trans({
   };
   const translation = key ? t(key, combinedTOpts) : defaultValue;
 
+  if (components) {
+    Object.keys(components).forEach((c) => {
+      const comp = components[c];
+      if (
+        typeof comp.type === 'function' ||
+        !comp.props ||
+        !comp.props.children ||
+        (translation.indexOf(`${c}/>`) < 0 && translation.indexOf(`${c} />`) < 0)
+      )
+        return;
+      // eslint-disable-next-line react/no-unstable-nested-components, no-inner-declarations
+      function Componentized() {
+        return <>{comp}</>;
+      }
+      components[c] = <Componentized />;
+    });
+  }
+
   const content = renderNodes(
     components || children,
     translation,

test/i18n.js

@@ -53,6 +53,7 @@ i18n.init({
         deepPath: {
           deepKey1: 'value1',
         },
+        transTestWithSelfClosing: 'interpolated component: <component/>',
       },
       other: {
         transTest1: 'Another go <1>there</1>.',

test/trans.render.spec.js

@@ -587,6 +587,30 @@ describe('trans should work with uppercase elements in components', () => {
   });
 });
 
+describe('trans should work with selfclosing elements in components', () => {
+  function TestComponent() {
+    return (
+      <Trans
+        i18nKey="transTestWithSelfClosing"
+        components={{
+          component: <div>These children will be preserved</div>,
+        }}
+      />
+    );
+  }
+  it('should render translated string', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        interpolated component: 
+        <div>
+          These children will be preserved
+        </div>
+      </div>
+    `);
+  });
+});
+
 describe('trans with null child', () => {
   function TestComponent() {
     return (