ReactJS & i18n.js: Translations with links

Question

I have a ReactJS project that's using i18n.js for translations.

In i18n JSON file I have a line like this:

"register": {
    "terms": "I have read and accept the Terms of Service"
}

I want only the "Terms of Service" part of the sentence to be a link.

At first I tried something like this:

<label className="lead">
    {i18n.t('register.terms').substr(0, 27)}<a href="#">{i18n.t('register.terms').substr(27, 43)}</a>
</label>

But well, of course it does not work with any other language than english.

Is there a way to do this without splitting the string value in two fields in the JSON file?

Does it related to React? is it works with react (& english)? — felixmosh, Apr 17 '20 at 10:20

score 3 · Accepted Answer · answered May 04 '20 at 20:23

3

Answer:

You can create an array.

"terms": ["I have read and accept the ", "Terms of Service"]

And then get the values like that:

<p>{i18n.t('terms.0')}<a href="#">{i18n.t('terms.1')}</a></p>

answered May 04 '20 at 20:23

SevenNationS

4

This might cause some issues with non-English locales where the ordering of words is different – Kok A. Nov 17 '21 at 21:24

1 Answers1