always render error component

[Maxim-Chugaev]

How can i render error component if field valid, but change css class on error component if field is invalid?

[davidkpiano]

The wrapper prop can be a function component that takes <Errors> props, so try this:

<Errors model="user.name"
  show={true}
  wrapper={({ fieldValue, children }) => {
    <div className={fieldValue.valid ? 'valid' : 'invalid'}>
      {children}
    </div>
  }}
/>

[Maxim-Chugaev]

I'm not sure this example work for me. I want reserve place for error message and change css property 'visibility' from hidden to visible.

[davidkpiano]

I see. The logic with <Errors> is that it shows errors (of course) if and only if there are errors. Have you tried using a custom control instead?

[worc]

the issue is that instead of something like visibility: hidden; the element just never renders which causes that inch-worm effect in any dynamic layout, your bootstraps and css flexboxes for example, and is an extra burden when trying to debug a form.

a better approach would've been to render the Errors component, set its visibility to hidden, and remove it from the tab-navigation stack. that way the element still reserves the space it needs when it does have error messages to display, and it could be easily overridden when debugging.