Redux-form-material-ui: best practices for intl error messages?

[rahulbot]

Do you have a hook to translate error messages while rendering the MaterialUI component? I'm using react-intl for internationalization.

When I am using redux-form I can translate the error by having validate return an intl message object to render like this:

<TextField
  errorText={(email.touched && email.error) ? formatMessage(email.error) : '';}
  {...email}
/>

However, with redux-form-material-ui I am supposed to use the Field tag. From my testing it looks like the errorText property of the Field tag is overridden by any error on that field. This makes it impossible to translate an error message outside of the validate function. That function has no state, and no way to access the locale data so I'm wondering what pattern to use to translate error messages. Thank for any tips!

[m19]

I ran into this problem also. I solved it like this:

const validate = (values, state) => {
  const { formatMessage } = state.intl
  const errors = {}

  if (!values.username) {
    errors.username = formatMessage({ id: 'required_error' })
  }

  return errors
}

The errorText will automatically get populated with my formatted message in the validation function.

[rahulbot]

Thx. I ended up making a compositional wrapper with render helper methods for each type of field. This lets me wrap any form component and use the render methods with the standard

See https://github.com/c4fcm/MediaCloud-TopicMapper/blob/master/src/components/common/IntlForm.js