menu

LinguiJS

Community about internationalization of React and JavaScript apps using LinguiJS library

Channels
Team

What is the proper way to add variables to <Select /> or <Plural />?

August 24, 2020 at 7:12am

What is the proper way to add variables to <Select /> or <Plural />?

August 24, 2020 at 7:12am
For example, I have a gender-dependent translation for Italian. A string that I want to translate also includes the variable. I tried:
<Select
value={gender}
female="Find {professionPluralName} near you"
other="Find {professionPluralName} near you"
/>
generated: "{gender, select, female {Find {professionPluralName} near you} other {Find {professionPluralName} near you}}": "{gender, select, female {Find {professionPluralName} near you} other {Find {professionPluralName} near you}}", But professionPluralName was replaced with empty string, despite being present in same scope.
<Select
value={gender}
female={<Trans>Find {professionPluralName} near you</Trans>}
other={<Trans>Find {professionPluralName} near you</Trans>}
/>
generated: "{gender, select, female {} other {}}": "{gender, select, female {} other {}}" which was obviously broken.
<Trans>
<Select
value={gender}
female="Find {professionPluralName} near you"
other="Find {professionPluralName} near you"
/>
</Trans>
generated: "{gender, select, female {Find {professionPluralName} near you} other {Find {professionPluralName} near you}}" same problem us without Trans
What I need to do to pass professionPluralName, and what is the correct way to do it?

August 24, 2020 at 8:02am
Looks like if I write it in this manner it's works:
<Trans
id="{gender, select, female {Find {professionPluralName} near you} other {Find {professionPluralName} near you}}"
defaults="{gender, select, female {Find {professionPluralName} near you} other {Find {professionPluralName} near you}}"
values={{ professionPluralName, gender }}
/>
  • reply
  • like