Field error in Controller

[danielbattat]

I am using Controller to render an input. How do I 'see' if there is an error on the field inside the render()? According to the API, there is an invalid prop, but when I use it I get an error cannot read property invalid of undefined

I know I can get the error via the errors property, but this does not help as the render function is not called every time the error object updates.

My code:

<Controller
  control={control}
  name={elem.id}
  defaultValue={elem.value}
  rules={{ required: 'req' }}
  render={({ onChange, onBlur, value, name }, { invalid, isTouched, isDirty }) => (
    <Input onChange={onChange} onBlur={onBlur} value={value} style={{ ...style, backgroundColor: invalid ? 'red' : 'transparent' }} {...props} />
  )}
/>

[bluebill1049]

can you share a codesandbox?

[danielbattat]

I got it to work with useController, but here is the issue: https://codesandbox.io/s/react-hook-form-v6-controller-forked-db89s?file=/src/index.js

[bluebill1049]

you are on a beta version. try with the latest, and your CSB was points './src' for react hook form