React JS i18next translate with JSX interpolation

Question

I want to pass a JSX object as an item in interpolation object of i18next translate method.

Please consider following code and result:

import React            from "react";
import {useTranslation} from "react-i18next";
import MoneyDisplay     from "../../../components/_generals/MoneyDisplay";

const minAmount = 1000;
const MyCompo   = () => {
    const {t} = useTranslation();
    const result = t('expr:Minimum amount for issue a new pre-invoice is {{minAmount}}', {minAmount: <MoneyDisplay value={minAmount} longUnit/>});
    return <div>{result}</div>;
};
export default MyCompo;

result is:

<div>[object Object]</div>

How can I have the right result in this situation without using Trans component?

Answer 1

They have a legacy option: https://react.i18next.com/legacy-v9/interpolate but it's deprecated so I wouldn't use that.

I think Trans is your best option