What is the best way to print this text with i18n?-CodePudding

Basically what I am trying to display is I am Python, Javascript and Flutter developer. string. But it looks this way:

With the following component in react:

<Typography gutterBottom variant="h6">
  I am <HL>Python</HL>, <HL>Javascript</HL> and <HL>Flutter</HL> developer.
</Typography>

With HL component I basically am applying a few stylings to texts, how would I go translating that with next-translate? My best try is:

<Typography gutterBottom variant="h6">
  {t("introduction2", {
    langs: [
      <HL>Python</HL>,
      <HL>JavaScript</HL>,
      <HL>Flutter</HL>,
    ]
  })}
</Typography>

With:

{
  ...
  "introduction2": "I am {{langs[0]}}, {{langs[1]}} and {{langs[2]}} developer.",
  ...
}

Also tried with:

{
  ...
  "introduction2": "I am {{langs.0}}, {{langs.1}} and {{langs.2}} developer.",
  ...
}

And also tried with renderToString on HL components but it does not behave how you may expect as I use Next.JS to render the page, it messes up theme settings provided by mui.

EDIT

Solved it by using Trans component mentioned by @adrai, but the solution differed a bit so here is the last form:

import Trans from "next-translate/Trans";

...

<Typography gutterBottom variant="h6">
  <Trans i18nKey="common:introduction2" components={[<HL />]}>
    I am <HL>Python</HL>, <HL>Javascript</HL> and <HL>Flutter</HL> developer.
  </Trans>
</Typography>

With:

{
  ...
  "introduction2": "I am <0>Python</0>, <0>Javascript</0> and <0>Flutter</0> developer.",
  ...
}

CodePudding user response：

Use the Trans Component: https://react.i18next.com/latest/trans-component

<Typography gutterBottom variant="h6">
  <Trans i18nKey="myKey">I am <HL>Python</HL>, <HL>Javascript</HL> and <HL>Flutter</HL> developer.</Trans>
</Typography>

And in the translation string use the <1>Python</1> tags…

"myKey": "I am <1>Python</1>, <3>Javascript</3> and <5>Flutter</5> developer."