React-i18next: How to use html in translations ?

[cedricdelpoux]

Question about react-i18next

Hello, I want to translate something advanced like :

mykey: "During the year <1/> you have done <b>{{count, format1}}</b> something"

I tried a lot a thing using the <Trans /> component:

<Trans
            i18nKey="mykey"
            count={count}
          >During the year <select><option>2018</option><option>2017</option></select> you have done <b>{{count, format1}}</b> something</Trans>

My select is empty and option are not rendered. Count is not replaced. I don't find any documentation about advanced usage.

Could you help me ?

Thank you very much

[isaachinman]

Questions should be posted on StackOverflow

You didn't even bother to delete this from the template before posting a question...

[isaachinman]

You also did not perform a basic Google search.

[jamuhl]

Just using the https://codesandbox.io/s/l4qrory2nl and pasting your Trans without the {{count, format1}} (removing format1 as you can't pass format like that)

It works as expected...just your translation string is totally wrong (either just set debug: true and read the console output "missing" to get it or try harder to find the documentation 😃to understand how it gets build up: https://react.i18next.com/components/trans-component#how-to-get-the-correct-translation-string)

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project -> there are many ways to help this project :pray:

[cedricdelpoux]

Of course I perform a basic search before but I could not find any help for my problem.
Thank you very much for your help @jamuhl

I'm very sorry but I tried what you said.

My select is empty (no option are render), count is not interpolated and I have nothing in the console during debug

[jamuhl]

What i said: add the Trans component without adding the wrong translation for it mykey: "During the year <1/> you have done <b>{{count, format1}}</b> something" is wrong -> then look at the console output showing the missing for it