Cannot easily pass errors from outside the form into it

I have a form that will have some validation errors coming from the parent component. I need to take those errors and pass them to the form state. However, informed doesn’t seem to provide such functionality. I could do it via setError function, but I would like to be able to achieve that without having to convert my components to stateful components. Is there such a way?

[JaffParker]

I’m a big fan of stateless components, so here’s what I try to do:

import React from 'react'
import { Form } from 'informed'

export const MyForm = ({outsideErrors}) =>
  <Form>
    {({
      formApi: { fieldExists, setError }
    }) => {
      mapValues(outsideErrors, (msg, field) => {
        fieldExists(field) && setError(field, msg)
      })

      return 'I am a form'
    }}
  </Form>

When I tried this approach, I realized that it causes the state to be updated inside the render function which causes it to re-render and update state again, ie endless loop.

I could technically convert it to a stateful component and use componentWillReceiveProps, but I’d rather avoid that. I would propose instead a prop, something like errors on both Form and Field component that would take an error object and merge it with validation errors. Something like this:

import React from 'react'
import { Form } from 'informed'

export const MyForm = ({outsideErrors}) =>
  <Form errors={outsideErrors}>
    {({
      formState: { errors }
    }) => {
      console.log(errors) // { ...outsideErrors, ...validationErrors }

      return 'I am a form'
    }}
  </Form>

Not sure if it’s functionality that others would be interested in, but it probably wouldn’t hurt. I can put together a PR for that.

[joepuzzo]

Closing as V2 is out and this should work as expected