0

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>"
Raphael Rafatpanah
  • 19,082
  • 25
  • 92
  • 158
  • I'm not sure what you are trying to achieve, can you add some example? – felixmosh Sep 02 '20 at 06:57
  • @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 `` implementation work with the `{React.string("...")}` part – Raphael Rafatpanah Sep 03 '20 at 02:06

1 Answers1

2

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

felixmosh
  • 32,615
  • 9
  • 69
  • 88
  • Hmm, with that JSON value, the `

    ` markup is lost. Thank you for the tip for whitespace formatting.

     – Raphael Rafatpanah Sep 03 '20 at 14:23
  • I've tried using `"error": "<1>Incorrect username / password combination.
    Is Caps Lock turned on?1>"` and still the `

    ` formatting is lost. This source code does get compiled to ES5 (after the JSX trasformation -> `React.createElement(...)` conversion is already done) and I'm wondering if that is problematic here

     – Raphael Rafatpanah Sep 03 '20 at 14:30
  • I've also tried `"error": "

    Incorrect username / password combination.
    Is Caps Lock turned on?

    "` and this keeps the `

    ` but losses the class name.

     – Raphael Rafatpanah Sep 03 '20 at 14:32
  • Look carefully my example, the `p` is outside of the `Trans` component, think that `Trans` is a replacement for the *text* – felixmosh Sep 03 '20 at 16:41