Error: react-hook-form from version 6.x.x to 7.x.x

[cabennetts]

In /admin/[slug].js

Error 1:

const { register, errors, handleSubmit, formState, reset, watch } = useForm({ defaultValues, mode: 'onChange' }); should be changed to

const { register, handleSubmit, formState, reset, watch, formState: { errors } } = useForm({ defaultValues, mode: 'onChange' });

Error 2:

<textarea
    name="content"
    ref={register({
      maxLength: { value: 20000, message: 'content is too long' },
      minLength: { value: 10, message: 'content is too short' },
      required: { value: true, message: 'content is required' },
    })}
  ></textarea>

should be changed to

<textarea 
          name='content'
          id='content'
          aria-invalid={errors.content ? "true" : "false"}
          {...register('content',
          { maxLength: { value: 20000, message: 'content is too long' },
            minLength: { value: 10, message: 'content is too short' },
            required: { value: true, message: 'content is required' }}
          )} ></textarea>

Error 3:

<input className={styles.checkbox} name="published" type="checkbox" ref={register} />

should be changed to

<input 
    className={styles.checkbox} 
    name="published" 
    type="checkbox" 
    {...register('published')} />

[csanchezwagenbach]

Essentially, everywhere there is an instance of name = 'someContent' ref={register}, we should instead have name = 'someContent' {...register('someContent', { required: true })}

Two instances on this page, to my eye.