<IfFieldValue>

Conditional rendering of field values.

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

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 {
  IfFieldValue,
  OneForm,
} from '@oneform/react'

const ConditionalFieldValueExample = () => (
  <OneForm
    values={{
      firstName: 'Kevin',
    }}
  >
    <div>
      <IfFieldValue name="firstName">
        That's a nice name.
      </IfFieldValue>
    </div>
  </OneForm>
)

export default ConditionalFieldValueExample 

When to use?

This is a niche component. This is probably most useful in complex forms:

• You want to show a <FieldValue>, but have it wrapped in some styled elements, so you only want to show it when a value exists.

• You want to show other fields only when certain fields have values.