ignore null children in trans component, fixes #1307

i18next · Apr 28, 2021 · 8c8e294 · 8c8e294
1 parent cbdeaf8
commit 8c8e294
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 11.8.15
+
+- ignore null children in Trans component [1307](https://github.com/i18next/react-i18next/issues/1307)
+
 ### 11.8.14
 
 - update html-parse-stringify to fix uppercase elements in Trans component [1304](https://github.com/i18next/react-i18next/issues/1304)

diff --git a/src/Trans.js b/src/Trans.js
@@ -17,7 +17,7 @@ function getChildren(node) {
 
 function hasValidReactChildren(children) {
   if (Object.prototype.toString.call(children) !== '[object Array]') return false;
-  return children.every(child => React.isValidElement(child));
+  return children.every((child) => React.isValidElement(child));
 }
 
 function getAsArray(data) {
@@ -72,6 +72,8 @@ export function nodesToString(children, i18nOptions) {
         const content = nodesToString(childChildren, i18nOptions);
         stringNode += `<${childIndex}>${content}</${childIndex}>`;
       }
+    } else if (child === null) {
+      warn(`Trans: the passed in value is invalid - seems you passed in a null child.`);
     } else if (typeof child === 'object') {
       // e.g. lorem {{ value, format }} ipsum
       const { format, ...clone } = child;
@@ -115,7 +117,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts) {
   function getData(childs) {
     const childrenArray = getAsArray(childs);
 
-    childrenArray.forEach(child => {
+    childrenArray.forEach((child) => {
       if (typeof child === 'string') return;
       if (hasChildren(child)) getData(getChildren(child));
       else if (typeof child === 'object' && !React.isValidElement(child))
@@ -275,7 +277,7 @@ export function Trans({
     return children;
   }
 
-  const t = tFromProps || i18n.t.bind(i18n) || (k => k);
+  const t = tFromProps || i18n.t.bind(i18n) || ((k) => k);
 
   const reactI18nextOptions = { ...getDefaults(), ...(i18n.options && i18n.options.react) };
 

diff --git a/test/trans.render.spec.js b/test/trans.render.spec.js
@@ -523,3 +523,26 @@ describe('trans should work with uppercase elements in components', () => {
     `);
   });
 });
+
+describe('trans with null child', () => {
+  const TestComponent = () => (
+    <Trans i18nKey="transTest1">
+      Open <Link to="/msgs">here</Link>.{null}
+    </Trans>
+  );
+
+  it('should ignore the null child and render correct content', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Go 
+        <a
+          href="/msgs"
+        >
+          there
+        </a>
+        .
+      </div>
+    `);
+  });
+});