CODEWITHSUNDEEP
reactjsi18nextreact-i18next
Yaniv
Yaniv

Reputation: 1908

Dynamic content inside Trans Component i18next

I have a list of translated keys and react component content. e.g :

    list = [{ translation: "Hello <1>World</1>", content: "Hello <a href='#'>World</a>" },
{ translation: "A <1>B</1>", content: "A <a href='#'>B</a>" }]

The idea is to show a translated data from the list using the "translation" and the structure of "content" with Trans Component of i18next-react with a map function.

{list.map((item) => (
<Trans i18nKey={item.translation}>
    {item.content}
</Trans>))}

Unfortunately, this doesn't seem to work at all, the outcome is only the translated string, without the structure that should came by the React Component content.

Any idea how to work around this?

Upvotes: 0

Views: 9524

Answers (3)

deaknaew
deaknaew

Reputation: 1

For who still have problem. make sure you have correct order of nested html

like

key ="<0><0/><1>translated here</1></0>";
function createMarkup()
{
return <div><input type="checkbox" /><label>translate here</label></div>;
}

<Trans i18nKey="key" >{ReactHtmlParser(createMarkup())}</Trans>

Upvotes: 0

Yaniv
Yaniv

Reputation: 1908

Just in case anyone will try to do this in the future: The way to do so is to use components props as Jamuhl mentioned. And to pass there an array with the HTML elements of the "item.content". The way to get the array of HTML elements from a string as we have on "item.content" is by using ReactHtmlParser that parse that string into an HTML elements array! ReactHtmlParser can be cloned from here: https://www.npmjs.com/package/react-html-parser

Upvotes: 1

jamuhl
jamuhl

Reputation: 4508

Your content is a pure string and not a react element. Therefore your code can't work -> it can't extract the a element from the string and replace the <1> with it.

edit below

sample:

{list.map((item) => (
<Trans
  i18nKey={item.translation}
  defaults={item.translation} // Hello <0>World</>
  components={[<a href="#">World</a>]}
</Trans>))}

You need to pass in the components to get interpolated into the "pseudo" tags <0>...details also have a look at https://react.i18next.com/misc/using-with-icu-format (for props defaults, components, values)

Upvotes: 1

Related Questions