How to return JSX object with I18Next?

Question

The problem is when I trying to return NavLink elements in this string, here is my elements and where I expect a string with links.

const termsOfUseLink = (
      <NavLink to="/terms-of-use" target="_blank">
        {t("exchange.checkbox1-links.termsOfUse")}
      </NavLink>
    );

    const howItWorksLink = (
      <NavLink to="/how-its-work" target="_blank">
        {t("exchange.checkbox1-links.howItWorks")}
      </NavLink>
    );

    const privacyPolicyLink = (
      <NavLink to="/privacy-policy" target="_blank">
        {t("exchange.checkbox1-links.privacyPolicy")}
      </NavLink>
    );

// in return

     {t("exchange.checkbox1", {
          returnObjects: true,
          termsOfUseLink: termsOfUseLink,
          howItWorksLink: howItWorksLink,
          privacyPolicyLink: privacyPolicyLink,
     })}

I have this JSON file with translation:

"checkbox1": "I agree with {{termsOfUseLink}} and {{howItWorksLink}} and {{privacyPolicyLink}}",
     "checkbox1-links": {
       "termsOfUse": "Terms of Use",
       "howItWorks": "How it works",
       "privacyPolicy": "Privacy Policy"
     },

When double brackets it returns [object Object], when single I got same string, as in checkbox1 value.

So is there a way to display these links inside I18Next?

Answer 1

I think the best way to solve this would not to be to translate the entire 'checkbox1' line that you have, but to instead just reference the links from inside your return and then just translate the other individual text.

return (<p> {t("exchange.iAgreeWith")} {termsOfUseLink} {t("exchange.and")} {howItWorksLink} {t("exchange.and")} {privacyPolicyLink } </p>

Json File:

"iAgreeWith": "I agree with",
"and" : "and"
 "checkbox1-links": {
   "termsOfUse": "Terms of Use",
   "howItWorks": "How it works",
   "privacyPolicy": "Privacy Policy"
 },