Hi all, we have a problem doing i18n with React. This is about template strings.
What we need:
<p>
By clicking SignUp, you accept our <a href="/terms">Terms of Service</a>
</p>
How I would do it (not in React):
i18n.t('By clicking SignUp, you accept our {{terms}}', {
terms: `<a href="/terms">${i18n.t('Terms of Service')}</a>`
})
Since React does not operate with strings/templates - this is not really possible to achieve.
Possible hacky, but not acceptable solution is
<p>
{i18n.t('By clicking SignUp, you accept our')}
<a href="/terms">{i18n.t('Terms of Service')}</a>
</p>
It is not acceptable in a long term since in other languages phrases are often arranged differently, so when you do translation you need to move <a>
around the sentence to not sound silly.
Very far from perfect, super verbose but working solution I came up with so far:
I could probably abstract it and have some wrapper to use in the app.