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?