<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.

Last updated