A function to lookup a Name in FieldValues

[chuwy]

Hey!

I'm writing a generic hook wrapping useForm:

const useViewEdit = <Item extends FieldValues, Name extends FieldPath<Item>>(
  item: Item,
  name: Name,
  render: (field: ControllerRenderProps<Item, Name>, isError: boolean) => React.ReactElement
) => {

  const { formState: { errors } } = useForm<Item>()

  const isError = lookup(errors, name)

  // below some logic to render the component and other stuff
}

Typically one would access an error as errors.something.anInputField, but in my case I can't do that because I know nothing about Name. Is there a real-world implementation for my lookup function?

[leapful]

@chuwy

You can use useFormState hook to get the state of target field element.

Reference: https://react-hook-form.com/docs/useformstate

[ivan-kleshnin]

Still the boilerplace:

const errors1 = useFormState({name: 'requiredSkills'}).errors.requiredSkills // repeating field name twice
const errors2 = useFormState({name: 'optionalSkills'}).errors.optionalSkills // ...
...

Could be nicely reduced to:

const errors1 = useFieldState('requiredSkills').errors // ^_^
const errors2 = useFieldState('optionalSkills').errors // 
...