reactjsi18next

h1 tags and class names are being skipped in i18Translation

I have a following JSON file to translate the content

"homeScreen": {
  "h1AndP":{
    "en":"<h1>Testing te heading</h1><p className='lg:text-4xl font-semibold'>Testing p tags</p>",
    "ar":"<h1>مرحباً</h1><p>مرحباً</p>"
  },

and this is my react code to

<Trans i18nKey="homeScreen:h1AndP">
</Trans>

As result of above code only the p tag is getting rendered in the page. And given class names also not added..

I tried with class and className both are not working.

Solution

  • You could explicitly pass in the needed elements through the components prop.

    <Trans
  i18nKey="homeScreen:h1AndP"
  components={{ h1: <h1 />, p: <p /> }}
/>