i am trying to make a variable in that is in the middle of the translation string in but i could not found a solution. I need all my translations in 2 different languages: 'en' and 'de'
My code looks like this:
import { useTranslation } from 'react-i18next'
const { t } = useTranslation('payment');
const companyName = 'Probando'
<Typography>{ t('setup with company name', <b>{companyName: companyName}</b>)</Typography>
My translation file:
payment en.json
{ "setup with company name": "Please contact {{ companyName }} to re-edit or re-send this invitation.", }
payment de.json:
{ "setup with company name": "Bitte wenden Sie sich an {{ companyName }} um diese Einladung nochmal zu bearbeiten oder neu zu erhalten." }
you need to use the Trans component if you want to use tags inside the translation.
https://react.i18next.com/latest/trans-component
import { Trans } from 'react-i18next'
const { t } = useTranslation('payment');
<Trans t={t} i18nKey="setup with company name">
Please contact <b>{{ companyName }}</b> to re-edit or re-send this invitation.
</Trans>
and then the translation like this:
// EN
"setup with company name": "Please contact <1>{{companyName}}</1> to re-edit or re-send this invitation.",
// DE
"setup with company name": "Bitte wenden Sie sich an <1>{{ companyName }}</1> um diese Einladung nochmal zu bearbeiten oder neu zu erhalten."