Grsmto Grsmto - 3 months ago 55
React JSX Question

Redux-form 6.0.0 access error outside Field component

In Redux-form v5 I was able to access to the "inline" errors (async validation) from anywhere in the decorated form, like so:

const fields = [
'email'
]

// inside the decorated form
const { email } = this.props.fields

console.log(email.error) // 'the validation error of the 'email' field


How can I achieve the same thing using Redux-form 6.0.0+ ?

Answer

If you are wanting to display the error next to the input, then it should be handled in the component that you pass to Field. If you want to display all the errors together, like at the bottom of the form by the submit button, you could use the new Fields component like so:

const fieldNames = [
  'email',
  'password'
]

const renderAllErrors = fields => (
  <ul>
    {Object.keys(fields).map(key => {
      const { meta: { touched, error } } = fields[ key ]
      return touched && error ? <li key={key}>{key}: {error}</li> : undefined
    })}
  </ul>
)

...

<Fields names={fieldNames} component={renderAllErrors}/>