Register is not a function when passing as a prop?

Question

I use react-hook-form for the first time. I was reading the docs and followed along. Likewise, I already laid out my components and styled them. Now I am trying to alert the data out after the form submits.

This is the ContactForm

import React, { useState } from 'react';
import * as S from './style';
import { PrimaryButton } from '@element/Button';
import TextInput from '@element/TextInput';
import { useForm } from 'react-hook-form';

export const ContactForm = () => {
  const { register, handleSubmit } = useForm();
  const [firstName, setFirstName] = useState('');
  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };
return (
    <S.ContactFormWrapper onSubmit={handleSubmit(onSubmit)}>
      <TextInput
        name={'firstName'}
        label={'First Name'}
        state={firstName}
        setState={setFirstName}
        placeholder={'John'}
        type={'text'}
        width={'48%'}
        options={{
          maxLength: '20',
          minLength: '2',
          required: true,
        }}
        register={register}
      />
      <PrimaryButton type={'submit'} text={'Send Message'} />
    </S.ContactFormWrapper onSubmit={handleSubmit(onSubmit)}>
)
}

This is my Custom created TextInput

import React, { useEffect, useState } from 'react';
import * as S from './style';

const TextInput = ({
  name,
  label,
  placeholder,
  state,
  setState,
  type,
  width,
  register,
  options,
}) => {
  const [isActive, setIsActive] = useState(false);

  return (
    <S.TextInputWrapper inputWidth={width}>
      <S.Label htmlFor={name} isActive={isActive}>
        {label}
      </S.Label>
      <S.Input
        placeholder={placeholder}
        type={type}
        name={name}
        id={name}
        {...register(name, options)}
        onChange={(event) => setState(event.target.value)}
        onFocus={() => setIsActive(true)}
        onBlur={() => setIsActive(false)}
      />
    </S.TextInputWrapper>
  );
};

export default TextInput;

Error Message

TypeError: register is not a function {...register(name, options)}

I was searching on StackOverflow there was a Post, but the Answer was confusing for me and the Questioner Code was much different than mine. Because I think the error occurred because I use styled-components, and it is nested deep. I am confused because I was reading the docs and followed along.

If I spread the Error says, register is not a function else if I not spread it then the error is ... spread is required.

Hopefully you can bring light to my confusion.

Kind regards Kuku

Answer 1

The simplest solution is to take advantage of react hook form's context and use the useFormContext hook.

Input Component

import { useFormContext } from "react-hook-form";

const TextInput = ({ name, options }) => {  
  const { register } = useFormContext();
  return (
      <S.Input
        name={name}
        {...register(name, options)}
      />
    </S.TextInputWrapper>
  );
};

Remove the input register function from the parent form

export const ContactForm = () => {
 ...other functions
 return <TextInput name={'firstName'} options={{maxLength: '20' }} />;
}

---

An even simpler solution is to let react-hook-form control the form values and use the useController hook or Controller component.

import { useController } from "react-hook-form";
const TextInput = ({ name, options }) => {  
  const { field } = useController({ name, rules: options });
  return <S.Input name={name} {...field} />
};

You can also get the input states using the useContoller hook to reduce the number of events your using.

import { useController } from "react-hook-form";
const TextInput = ({ name, options }) => {  
  const { 
   field,
   fieldState: { error, invalid, isDirty, isTouched }
 } = useController({ name, rules: options });
};

Answer 2

useFormContext is a good solution explained by @Sean W

Here is another solution without useFormContext, you can use register as usual instead of passing it as a prop. You just have to forward the ref of your TextInput.

?? You can find an instance here: https://stackoverflow.com/a/68667226/4973076