Trans component modifies passed tOptions and overrides "context" property from the object

[vasiliy-l]

🐛 Bug Report

When rendering <Trans> component with tOptions property, the component modifies the given object by updating context value to the property passed to the component itself.

react-i18next/src/TransWithoutContext.js

Line 332 in f8d0111

tOptions.context = context;

This behaviour is unexpected and wrong as, firstly, we modify passed tOptions inside the component, and secondly, we override the context value by undefined value (when context property is not specified for the <Trans>)

To Reproduce

https://codesandbox.io/p/sandbox/react18next-trans-toptions-override-issue-4f2kyg

const { t } = useTranslation();
const tOptions = useMemo(() => ({ context: "bar" }), []);

...

<Trans t={t} i18nKey="foo-key" tOptions={tOptions} />
// Rendering this component modifies the `tOptions` object by setting tOptions.context = undefined

...

<Trans t={t} i18nKey="foo-key" context="baz" tOptions={tOptions} />
// Rendering this component modifies the `tOptions` object by setting tOptions.context = "baz"

Expected behavior

The <Trans> component should not modify the given tOptions or mess with the context values.

This may be fixed in TransWithoutContext component, where combined options object is defined:

react-i18next/src/TransWithoutContext.js

Lines 354 to 360 in f8d0111

	const combinedTOpts = {
	...tOptions,
	count,
	...values,
	defaultValue,
	ns: namespaces,
	};

const combinedTOpts = {
    ...tOptions,
    context: context || tOptions.context, // Add `context` from the props or fallback to the value from `tOptions`
    count,
    ...values,
    defaultValue,
    ns: namespaces,
  };

Your Environment

• i18next version: 23.11.2
• react-i18next version: 14.1.0

[adrai]

Should be addressed with v14.1.1