1

I'm using i18n(v9) to translate a lot of text in a big react project. It's working as intended in cases like:

            <Intro
              title={details.title}
              subtitle={t('resume-upload subtitle')}
              description={t('resume-upload description 2')}
            />

However, In a form component that uses these 2 imports:

import { Form } from 'mobx-react-form';
import validatorjs from 'validatorjs';

When I try to translate labels within the code like this:

  setup() {
    const { t } = this.props;
    return {
      fields: [
        {
          name: 'step',
          value: 0
        },
        {
          name: 'firstName',
          label: t('Firstname'),
          rules: 'required|string|between:2,25'
        },
        {
          name: 'lastName',
          label: t('Achternaam'),
          rules: 'required|string|between:2,25'
        },
        {
          name: 'emailaddress',
          label: t('Email'),
          rules: 'required|email|string'
        },
        {
          name: 'phonenumber',
          label: t('Telephone number'),
          rules: 'required|string|telephone'
        },
        {
          name: 'cv',
          label: t('resume')
        },
        {
          name: 'terms',
          label: 'Terms',
          value: false
        },
        {
          name: 'newFile',
          label: '',
          value: true
        },
        {
          name: 'noFile',
          label: '',
          value: false
        }
      ]
    };
  }
}
export default withNamespaces()(UploadForm);

The t function gives an error in a parent file:

TypeError: form.values is not a function

Is there a way to translate json files like the way I'm attempting?

0 Answers0