React-redux-form: Possibility to show only 1 validation message per field

[vkurlyan]

It would be nice to have a possibility to show only first validation message per field.

We can redefine error wrapper and do it there, but in this way, we have to use a lot of internal library data that could be changed in future.

[GarrisonD]

With Errors component you can specify errors container:

<Errors ... wrapper={({ children }) => <div className="errors-container">{children}</div>} />

And after that you will have something like this:

<div class="errors-container">
  <span>Email can't be blank!</span>
  <span>It doesn't look like a valid email!</span>
  <span>... more spans with error messages ...</span>
</div>

And then you need to add this CSS snippet in order to hide all spans with error messages per each <div class="errors-container"> except the first one:

.errors-container * ~ * {
  display: none;
}

@vkurlyan I hope it helps you!

P. S. I know my English is poor 😄 but I hope you understand what I wrote above.

[davidkpiano]

The above is a good method if you want to do it with just CSS. Otherwise, you can just modify the wrapper={...} prop with a functional component:

const errorWrapper = ({ children }) => (
  <div>
    {React.Children.toArray(this.props.children)[0]}
  </div>
);

// in render()
<Errors wrapper={errorWrapper} />

I believe this will work, but I haven't tested it. Hope that helps!

[vladshcherbin]

Another way is to use mapProps and pass errors. Then, you can simply do smth like this:

const FieldError = ({ errors }) => {
  const inValidFields = Object.keys(errors).filter(error => errors[error])

  return <p className="error">{translate(`forms.validation.${inValidFields[0]}`)}</p>
}