React i18n translate issue

Question

I am using i18n in my meteor/react app and encountered some problem. In this case everything is working perfect:

import { translate, Trans } from 'react-i18next'; ... export class AddressVerificationForm extends React.Component { ... {this.props.t('address.photos.format')} ... export const AddressVerificationFormTranslated = translate('common')(AddressVerificationForm);

But in this case:

import { translate, Trans } from 'react-i18next'; ... export function UserInterface({data, onAdmin, isAdmin}: propTypes) { ... {this.props.t('address.country')} ... export const UserInterfaceTranslated = translate('common')(UserInterface);

I get:

Uncaught TypeError: Cannot read property 't' of undefined

Chris · Accepted Answer · 2018-06-15 10:03:25Z

In the first snippet you are extending the React class, but in the second snippet, this doesn't refer to your component, but to the function itself. As such, there are no props to read from. You need to add the argument t along with the other ones.

In other words, this should work:

export function UserInterface({data, onAdmin, isAdmin, t}: propTypes) { ... {t('address.country')}

Collectives™ on Stack Overflow

React i18n translate issue

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related