2

I am following this:

https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-react-app-with-react-i18next

But, as you can see, I have to do this:

export default translate()(App);

But I am already using this in my component:

export default withRouter(connect(null, mapDispatchToProps)(withStyles(styles)(SignIn)));

What Can I do in this case?

Thanks a lot.

lmendivil
  • 157
  • 2
  • 12

1 Answers1

2

You can check out this answer, which answers this exact problem.

Long story short, it should be possible to just further wrap the Higher Order Components (HOC) like this:

export default withRouter(connect(null, mapDispatchToProps)(withStyles(styles)(translate()(SignIn))));

or use recompose like in the answer linked above.

saltenhub
  • 633
  • 7
  • 8
  • Gracias... estoy usando React con TypeScript. Y ahora estoy obteniendo este error: – lmendivil Sep 07 '18 at 18:27
  • TypeError: Unable to get property '0' of undefined or null reference getI18nTranslate D:/jds3.0_cloud_web_app/node_modules/react-i18next/dist/es/I18n.js:138 135 | }, { 136 | key: 'getI18nTranslate', 137 | value: function getI18nTranslate() { > 138 | return this.i18n.getFixedT(null, this.options.nsMode === 'fallback' ? this.namespaces : this.namespaces[0]); 139 | } 140 | }, { 141 | key: 'render', – lmendivil Sep 07 '18 at 18:28
  • The translate function takes a string argument with the namespace of the translations and falls back to the default namespace defined in the i18next provider if you leave the argument empty. Please check out the [documentation](https://react.i18next.com/components/overview) and a working example [here](https://codesandbox.io/s/8n252n822) – saltenhub Sep 10 '18 at 09:04