Does this.props.i18n.t works ?

Hi, I got a state component which called a component that need translation.

class Comment extends React.Component{
  render(){
    <CustomTextarea
      ref='textarea'
      placeholder={this.props.i18n.t`Feel free to leave a comment`}
      value={this.state.answer}
      />
  }
}

And when I do lingui extract I don’t have the message in my messages.json files.

BUT if I used a stateless component like this:

const TransCustomTextarea = WithI18n()(
  ({ i18n, props }) =>
    <CustomTextarea
      placeholder={i18n.t`Feel free to leave a comment`}
      {...props}
      />
)

Then

class Comment extends React.Component{
  render(){
    <TransCustomTextarea
      ref='textarea'
      value={this.state.answer}
      />
  }
}

Everything works.

Should I do this extra step every time ?

I use

"lingui-cli": "^1.4.2",
"lingui-i18n": "^1.3.3",
"lingui-react": "^1.4.1",

Thanks

[LFDMR]

Nice it works this way!

[panigrah]

I am getting a similar error. react-dom.production.min.js:164 TypeError: t.t is not a function when I use i18n.t. I am using withI18n() HOC and using compose to combine a few different HOCs together. It works fine in development but not in production.

If I replace i18n.t with i18n._ it works.

Any ideas on what I can change?