<IfFieldErrorMessage>

This component allows you to conditionally render based on the existence of a field error message.

Props

Prop Name	Prop Type	Description
children	Node	Any number of components.
fallback	Node	Fallback component that displays when. This will change in a future version.
getIsVisible	Function	Callback function that gives you the value and lets you customize when the contents should or should not be visible.
name	String	The base field name without a /.

import {
  FieldErrorMessage,
  IfFieldErrorMessage,
  OneForm,
} from '@oneform/react'

const ConditionalFieldErrorMessageExample = () => (
  <OneForm
    errorMessages={{
      firstName: ['You need a name'],
    }}
  >
    <div>
      <IfFieldErrorMessage name="firstName">
        <small>
          <FieldErrorMessage name="firstName" />
        </small>
      </IfFieldErrorMessage >
    </div>
  </OneForm>
)

export default ConditionalFieldErrorMessageExample 

When to use?

This component will probably be used often if you have separate error components.

Some notable uses:

• You want to show a <FieldErrorMessage>, but have it wrapped in some styled elements, so you only want to show it when an error message exists.

• You want to show instructions when a field has errored.