react-i18next: Trans component with complex children does not add the key to Locize using backend

Describe the bug One of my translated component does not add the key inside Locize automatically, while using other simpler Trans or t works fine.

Occurs in react-i18next version i18next: 19.0.3 react-i18next: 11.2.6 i18next-locize-backend: 3.0.0

To Reproduce

<Alert
  color="success"
>
  <Trans
    i18nKey={'simulatorResults.resultsBloc.summary'}
    tOptions={{
      context: simulated.isDeferredTypePartial ? 'partial' : 'total',
    }}
  >
    Votre simulation de prêt d'un montant de <b>{prettifyNumber(amount)}€</b> à <b>{simulated.interestRate}%</b> d'une durée
    de <b>{simulated.totalDuration} mois</b> dont <b>{simulated.deferredPaymentsQuantity} mois</b> de
    différé {simulated.isDeferredTypePartial ? 'partiel' : 'total'} est possible ! Félicitations !<br />
    Il n’est pas obligatoire de souscrire à une assurance.<br />
    Consultez le chapitre 8 du{' '}
    <a
      href={'#'}
      onClick={this.scrollToEbook}
    >"Guide du prêt étudiant"</a>{' '}
    pour comprendre dans quels cas l'assurance est utile.
  </Trans>
</Alert>

Expected behaviour The key simulatorResults.resultsBloc.summary should be added to Locize with the content for the default language (fr)

Screenshots

OS (please complete the following information):

Device: [e.g. MBP 2018 13"] Mac OS
Browser: [e.g. Chrome 70.0.3538.77] Chrome lastest

Additional context There is no log in the console about missing translation for the key simulatorResults.resultsBloc.summary` (but I do usually get warnings when a key is not found in Locize so I know it’s being created automatically, just not for this particular)

I strongly believe the issue is related to the content being “complex”, it’s the first time I have to deal with such complex translation and I’m not sure to do it properly.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 20 (8 by maintainers)

Most upvoted comments

When i18next comes across that key for the first time (where const userKind = ‘male’), it would create the key welcome_male with the default content Hello handsome.

When the same component is loaded for the first time with const userKind = “female” it would then create the key welcome_female with the default content Hello darling.

Like said…it does not work like this…context always gets a fallback key without the _myContextValue therefore not run the missing again -> changing that is not so easy.

Hello {{ userKind === 'male' ? 'handsome' : 'darling'}} is english and might not apply to other countries / areas in the world…so eg. some language will only use the fallback of “hello there” not gender specificas

you don’t like the behaviour…then use key.female, key.male, key.other…works too -> just is not a context / selector usage

jamuhl on Jan 9, 2020

The problem arises, when the context value passed to i18next is coming from a different source with more dynamic output. i.e. I want only to catch 2 out of hundreds of context variations and the rest with de “base” key…

adrai on Jan 9, 2020

a key is only missing if not found anything suitable. anything suitable -> value in fallback, value as singular in case of plural, “nude” fallback key in case of context (so eg. context: male, female -> fallback = other).
missing can create plurals as it knows all the plural forms needed. missing can’t create all context forms as it does not know them -> they are what the developer defines…
as it saved the nude key as best option - that key will never be missing again as it now can perfectly fallback to the “other” / “nude” option

yes you can: <Trans i18nKey={simulatorResults.resultsBloc.recommendedSimulationIsViable.summary.${simulated.isDeferredTypePartial ? DEFERRED_TYPE_PARTIAL : DEFERRED_TYPE_TOTAL}`}

but i would use a.instead of the reserved_`

jamuhl on Jan 8, 2020

in i18next for plural and context “nude” keys are always treated as the fallback…while for plurals we got an option to create all keys there is no such option for context (as we do not know the options contexts can take)

jamuhl on Jan 8, 2020