Any ideas how to parse href for links inside JSON files?

[guillermo-avalos]

I need to be able to have HTML in my JSON translation files. I was able to parse p and b tags, as well as anchors tags, but the moment I add href to it, the content breaks. I'm using the Trans component of course. Here's what I'm using:

JSON Translation (common.json):

"MainContent": {
    "Line1": "This is the first plain text line",
    "Line2": "<p>This this the intro, with a <a>link</a> and some <b>bold text</b>.</p>"
  },

Trans component looks like this (using TailwindCSS for styling):

<Trans
          i18nKey={`common:MainContent.Line2`}
          components={{
            p: <p className="mb-4" />,
            a: <a className="cursor-pointer" />,
            b: <b className="font-bold" />,
          }}
/>

This successfully renders and translates out. However, when I add the href= to the a tag, it breaks. Any ideas on how to target the full a href tag? btw I'm using Next.js so the Link component would be preferable.

[aralroca]

What is happening when you say "It break"? <a href="" /> should work, and <Link href=""><a /></Link> too.

[guillermo-avalos]

What happens is that the link no longer renders as a link. Here's what I see without the href part in the a tag:

This is the intro, with a link and some bold text.

However, if I add an href to the JSON translation file:
"Line2": "<p>This this the intro, with a <a href='http://somewhere.com'>link</a> and some <b>bold text</b>.</p>"

The rendered output is:
This is the intro, with a <a href='http://somewhere.com'>link</a> and some bold text.

[guillermo-avalos]

What is happening when you say "It break"? <a href="" /> should work, and <Link href=""><a /></Link> too.

Any ideas on how to fix this?

[aralroca]

Yes. This is not as expected. Inside the translations inside <></> you can use numbers: <0></0>, or names <something></something>. Is not HTML and not allow properties inside. This only work to then substitute with the HTML you want:

With numbers as an array: <Trans {...props} components={[<a href="..." />]} />
With names as object: <Trans {...props} components={{ something: <a href="..." /> }} />