How to put html code inside react18next json translation file?

I have blog page on multiple languages and I use react-i18next library for translation. I have one component called BlogPostPage where I show each post when it’s opened, inside the component there is part for showing blog text like this:

    import { useTranslation } from "react-i18next";
      const [t] = useTranslation(["translation1", "overview"]);
          ..........
        <Typography mb={2} component="p" variant="subtitle1">
            {t(`text${state.id}1`)}
        </Typography>

and my json translation file looks like this

{
"text51":"<h4>Welcome to our application</h4>",
}

So I want to put html code inside translation text since different post has different html code it really needs to be in json file and not in the component… is there any way that can be done?

Output of my code is:

<h4>Welcome to our application</h4>

Answer

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

<Trans i18nKey="text51">
  <h4>Welcome to our application</h4>
</Trans>

With <0> instead of <h4>

"text51": "<0>Welcome to our application</0>"

Advertisement

Answer