Translating defaultProps with t()

Describe the bug When defaultProps are translated with t(), the translated value is never shown.

To Reproduce

For example, here is a simple component.

import React from 'react';
import { IonLoading } from '@ionic/react';
import { t } from '@lingui/macro';

interface MyProps {
  textToShow?: string,
}

const Loading: React.VFC<MyProps> = ({ textToShow }: MyProps) => (
  <IonLoading
    isOpen
    message={textToShow}
  />
);

Loading.defaultProps = {
  textToShow: t({ id: 'loading.text', message: 'Getting Ready...' }),
};

export default Loading;

Run lingui extract. Translate loading.text to something else, such as “Getting ready translated”. Run lingui compile. Change the app language and cause the loading component to trigger. The text will be Getting Ready..., not Getting ready translated.

Expected behavior defaultProps values should use the translation, not the original text.

• jsLingui version lingui --version 3.8.3
• Babel version npm list @babel/core @babel/core@7.12.3
• Your Babel config (e.g. .babelrc) or framework you use (Create React App, Meteor, etc.) create-react-app via Ionic React v5

[ptmkenny]

Wow, thank you so much, this is very helpful.

This thorough response makes me very glad I chose lingui from among the many i18n js options. 😄

[sapandiwakar]

For anyone coming here searching to localize defaultProps, there is a small mistake in https://github.com/lingui/js-lingui/issues/1037#issuecomment-816633278. You should use defineMessage inside defaultProps (since this is an object that is evaluated only once) object and then translate the message inside the component like this:

import React from 'react';
import { IonLoading } from '@ionic/react';
import { defineMessage } from '@lingui/macro';
import { i18n } from '@lingui/core';

interface MyProps {
  textToShow?: string,
}

const Loading: React.VFC<MyProps> = ({ textToShow }: MyProps) => (
  <IonLoading
    isOpen
    message={typeof textToShow === 'string' ? textToShow : i18n._(textToShow)}
  />
);

Loading.defaultProps = {
  textToShow: defineMessage({
    id: 'loading.text',
    message: 'Getting Ready...',
  }),
};

export default Loading;