A warning engine implemented in 🏁 React Final Form

warning-engine.js

const WarningEngine = ({ mutators: { setFieldData } }) => (
  // FormSpy lets you listen to any part of the form state you want.
  // If you provide an onChange prop, FormSpy will not render to the DOM.
  <FormSpy
    subscription={{ values: true }}
    onChange={({ values }) => {
      setFieldData('firstName', {
        warning: values.firstName ? undefined : 'Recommended'
      })
      setFieldData('lastName', {
        warning: values.lastName ? undefined : 'Recommended'
      })
    }}
  />
)