CODEWITHSUNDEEP
jsonreactjsstringinternationalizationlanguage-translation
Hirohito Yamada
Hirohito Yamada

Reputation: 387

Adding span tag in json translation string

I have a react app with JP/EN language options. I handle our copies&texts in such format.

      <TopHeading>
        {t('landingTitle')}
      </TopHeading>
      <SubHeading>
        {t('landingCatchCopy')}
      </SubHeading>

Then manage the translation strings in json file like below

    "landingTitle": "Portfolio made easy.",
    "landingCatchCopy": "Creators must-have, without a hassle.",

Now, I would like to include <span> tag in desired part of the text so that I could put a line-break to fit the text in the viewers screen responsibly.

How could I achieve this? Any hint will be much appreciated! Thank you for your time in advance!

Upvotes: 1

Views: 1197

Answers (1)

user11910739
user11910739

Reputation:

If you want to load HTML tag then use dangerouslySetInnerHTML.

<TopHeading>
    <div dangerouslySetInnerHTML={{ __html: t('landingTitle') }}></div>
</TopHeading>
<SubHeading>
    <div dangerouslySetInnerHTML={{ __html: t('landingCatchCopy') }}></div>
</SubHeading>

manage the translation strings in json file like below

"landingTitle": "Portfolio made easy.",
"landingCatchCopy": "<span>Creators must-have,</span><br/><span>without a hassle.</span>",

Hope this will work for you!

Upvotes: 1

Related Questions