Passing translated strings to redux-form field level validation

I am not able to come up with a way to translate field level validations in redux-form. In the example below, how can I translate a string outside of the component scope?

const minValue0 = minValue(0)('translatedString')
const TheForm => props => {
 ..        return(<Field
          id="quantity"
          type="number" 
          name="quantity"
          validate={[minValue0]}
          component={InputField} />)

}

Defining minValue0 inside the component does not work because the validation will break.

[jamuhl]

You can require i18n and use it’s t function outside of components (no translate hoc), sample:

import Validator from 'validatorjs';
import i18n from './i18n';
import { unflatten } from 'flat';

// Check if value is includes in usedValuesString.
// Comparison is performed after passing values through 'normalizer'.
function checkUniqueness(value, usedValuesString, normalizer) {
  const normalizedUsedValues = usedValuesString.split(',').map(normalizer);
  const normalizedValue = normalizer(value);
  return !normalizedUsedValues.includes(normalizedValue);
}

export function validate(rules) {

  return (values) => {
    const commonMessages = i18n.t('validation:validationErrors', { returnObjects: true });
    const customMessages = i18n.t('validation', { returnObjects: true });
    const validator = new Validator(values || {}, rules, { ...commonMessages, ...customMessages });
    validator.passes();
    const errors = {};
    Object.keys(validator.errors.all()).forEach(field => {
      errors[field] = validator.errors.first(field);
    });
    return unflatten(errors);
  };
}

[ideasOS]

I wanted to document a related problem that I have managed to solve. The issue is already closed, but I believe this is the best place for others to find this hint. In my project, I am using redux, React, redux-form FieldArrays, react-select, react-i18next.

I wanted to create a form which was able to create an array as one of the form fields. I did not manage to use a function from the props for the ‘component’ of the FieldArray inside the render function of the form component, but had to create one outside of the render function. That helped me to avoid an infinite loop and is working fine.

Of course it was necessary to import i18n’s t function as @jamuhl recommends https://github.com/i18next/react-i18next/issues/306#issuecomment-332868722 .