Skip to content

Commit

Permalink
fix issue where component children would be removed when they are pas…
Browse files Browse the repository at this point in the history
…sed to react component
  • Loading branch information
simbra committed Nov 29, 2024
1 parent ae85abb commit bf800ac
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 2 deletions.
2 changes: 1 addition & 1 deletion react-i18next.js
Original file line number Diff line number Diff line change
Expand Up @@ -476,7 +476,7 @@
const comp = react.cloneElement(components[c], {
key: componentKey
});
if (typeof comp.type === 'function' || !comp.props || !comp.props.children || translation.indexOf(`${c}/>`) < 0 && translation.indexOf(`${c} />`) < 0) return;
if (!comp.props || !comp.props.children || translation.indexOf(`${c}/>`) < 0 && translation.indexOf(`${c} />`) < 0) return;
function Componentized() {
return react.createElement(react.Fragment, null, comp);
}
Expand Down
1 change: 0 additions & 1 deletion src/TransWithoutContext.js
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,6 @@ export function Trans({
const componentKey = components[c].key || c;
const comp = cloneElement(components[c], { key: componentKey });
if (
typeof comp.type === 'function' ||
!comp.props ||
!comp.props.children ||
(translation.indexOf(`${c}/>`) < 0 && translation.indexOf(`${c} />`) < 0)
Expand Down
24 changes: 24 additions & 0 deletions test/trans.render.spec.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -648,6 +648,30 @@ describe('trans should work with selfclosing elements in components', () => {
});
});

describe('trans should work with self closing elements with react components', () => {
function Component({ children }) {
return <div>{children}</div>;
}
it('should render translated string', () => {
const { container } = render(
<Trans
i18nKey="transTestWithSelfClosing"
components={{
component: <Component>These children will be preserved</Component>,
}}
/>,
);
expect(container.firstChild).toMatchInlineSnapshot(`
<div>
interpolated component:
<div>
These children will be preserved
</div>
</div>
`);
});
});

describe('trans with null child', () => {
function TestComponent() {
return (
Expand Down

0 comments on commit bf800ac

Please sign in to comment.