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?

Answer 1

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>