Using react components in string for react-intl-universal

Question

Trying to use Link within an i18n string but it doesn't read the Link component properly. How do you include react components in react-intl-universal?

language json file

{
  "somekey": "some<Link to={ link } somewhere </Link>"
}

javascript

import { Link } from 'react-router'

<Fragment>{ intl.getHTML('somekey', { link: `/somewhere` }) }</Fragment>

Change you json file to `{"somekey": "some"}` – cwtuan Apr 15 '19 at 11:37 — cwtuan, Apr 15 '19 at 11:37

score 0 · Answer 1 · answered Dec 07 '18 at 18:05

You cannot pass a component in react-intl-universal getHTML() method. When you call this method, react-intl-universal create a span element and sets its inner HTML. So the translation that you return with intl.getHTML() is just a HTML string and not a component that will be translated into HTML by react.

You should breakdown your translation in 2 parts and write something like:

import { Link } from 'react-router'

<Fragment>
  {intl.get('contentBeforeLink')}
  <Link to="/somewhere">
    {intl.get('contentInsideLink')}
  </Link>
</Fragment>

Using react components in string for react-intl-universal

1 Answers1