FormField

FormField

Higher-order component for making a component easy to use in a Redux Form or React Final Form <Field>.

When passing a component into the component prop of a Field, React Final Form and Redux Form will inject input and meta props.

When doing this:

<Field name="myField" component={MyCustomInput} />

MyCustomInput will receive input and meta objects in its props; input is mostly events, and meta is mostly computed properties of the form field.

Usage

formField() will pass along the input props as-is. To normalize the meta props:

function ExampleComponent({ value, onChange, warning, error }) => (
  <div>{warning}</div>
);

export default formField(
  ExampleComponent,
  ({ meta }) => ({
    dirty: meta.dirty,
    error: (meta.touched && meta.error ? meta.error : '')
  })
);

For an example, see <Checkbox>.

Props

Name	type	description	required
WrappedComponent	node	Component to redux-form-ify	Yes
config	function	If provided, will map logic from props.input and props.meta to props on the WrappedComponent	No

Learning

• React Higher-Order Components
• Redux Form Field
• React Final Form Field