i18next bold text in the middle of a translation

Question

I have a static file called translations.json which includes my translations:

{
  "common": {
    "greeting": "We will see you at NEW YORK in the morning!"
  }
}

Within my react code, ive been use doing somethign along the lines of:

<p>{translate('common.greeting')}</p>

However, I want the word "NEW YORK" to be bold. Ive been doing some research and I see the the Trans component might be what im looking for but im having no luck. Im about to just split the translation into 3 parts... greetingIntro, grettingBold, and grettingEnd...

Can someone point me in the right direction?

Answer 1

@adrai and @xec has already answered this question, but I think it's still too complicated.

So the simple version of this answer is... Use this in your code:

import { Trans } from 'react-i18next'

<Trans i18nKey="common.greeting" />

and this in your JSON:

{
  "common": {
    "greeting": "We will see you at <strong>NEW YORK</strong> in the morning!"
  }
}

Full docs available at https://react.i18next.com/latest/trans-component

My versions are:

"i18next": "^20.6.0",
"react-i18next": "^11.11.4",