react-i18next hook vs component with translation strings

Question

it looks like the react-i18next useTranslation hook doesn't strip out the <></> from translation strings

for example, say we have translation like this:

"some_string_with_brackets": "hello <text>world</text>."

using the Trans component like:

<Trans
  i18nKey="some_string_with_brackets"
  components={{
    text: (
      <span/>
    )
  }}
/>

the string will be displayed with the span component defined in the components object, as desired.

But if we use the same key in the t function from the useTranslation hook, the result is:

hello <text>world</text>.

What is the correct way to handle this scenario? I can add _trans to keys that need to be rendered with the Trans component, but I am wondering if I am missing something about how this should work.

question from:https://stackoverflow.com/questions/65862244/react-i18next-hook-vs-component-with-translation-strings

Answer 1

Waitting for answers