How to extract react-i18next translation using function call?

Question

Given the following code:

<Trans i18nKey="error" ns="login">
  <p className="error">
    {React.string("Incorrect username/password combination.")}
    <br />
    {React.string("Is Caps Lock turned on?")}
  </p>
</Trans>

Notice the React.string function calls.

Is there a way to make this work with i18next? What would this key's value look like in the JSON file?

Update

In my translations JSON file, how should the above code look?

"error": "<1>???</1>"

I'm not sure what you are trying to achieve, can you add some example? — felixmosh
@felixmosh I've added an update. I'm looking to understand how the translations JSON value could look like, as I haven't been able to figure out a way to make the <Trans /> implementation work with the {React.string("...")} part — Raphael Rafatpanah

felixmosh felixmosh · Accepted Answer · 2020-09-03T05:13:34

I'm not sure what is this React.string method, but the whole purpose of Trans is to integrate style tags in a text.

The text should be in the translation (json) file.

Your usage should look like:

<p className="error">
  <Trans i18nKey="error" ns="login" />
</p>

{
  "error": "Incorrect username/password combination.<br />Is Caps Lock turned on?"
}

BTW, for line break you can avoid Trans component, you can use white space and css, for more info read this answer: React i18n break lines in JSON String

How to extract react-i18next translation using function call?

Update

1 Answers