Js-lingui: i18n.t for defaultProps

[LFDMR]

Hi,
I wonder how I should use lingui for defaultProps who will be used as the title attribute.

const ValidateButton = ({
  i18n, validateMsg
 }) => {
    return (
      <img
        title={validateMsg}
        />
    )
  }

ValidateButton.defaultProps ={
  validateMsg: 'Send',
}

When I use Trans, it render [Object]

[tricoder42]

I would recommend mark string in defaultProps as translated and pass variable either to id prop of Trans component or i18n._ low-level method:

// must be wrapped in withI18n to access i18n object
const ValidateButton = withI18n()({
  i18n, validateMsg
 }) => {
    return (
      <img
        title={i18n._(validateMsg)}
        />
      // using Trans component
      // <Trans id={validateMsg} render={({ translation }) => <img title={translation} />} />
    )
  }

ValidateButton.defaultProps ={
  // i18nMark is required for extraction only. All i18n function and components works with any variables.
  validateMsg: i18nMark('Send'),
}

[LFDMR]

Awesome !

[landsman]

This is not working for me with Next.js

[tricoder42]

Hey @landsman, defaultProps in general are problematic. In future versions of LinguiJS they won't be even supported. Try to rewrite your code so it doesn't use translated messages in default props. I understand it isn't ideal, but it's necessary trade-off.