Input error | JavaScript Mastery - Programming & Coding Community | Page 1

Hi all, receiving the error message:

TypeError: Register is not a function, and it is coming back to the line

{...register(name)}

I have made an InputField.tsx component as follows:

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


type InputFieldProps = {
    label:string;
    type?:string;
    register:any;
    name:string;
    defaultValue?:string | number;
    error?:FieldError;
    inputProps?:React.InputHTMLAttributes<HTMLInputElement>;
}

const InputField = ({
    label,
    type = "text",
    register,
    name,
    defaultValue,
    error,
    inputProps
}: InputFieldProps) => {

    return (
        <div className="flex flex-col gap-2 w-full md:w-1/4">
            <label className="text-xs text-gray-500">{label}</label>
            <input 
                type={type} 
                {...register(name)} 
                className="ring-[1.5px] ring-gray-300 p-2 rounded-md text-sm w-full"
                {...inputProps}
                defaultValue={defaultValue}
            />
            {error?.message && (
                <p className="text-xs text-red-400">
                    {error?.message.toString()}
                </p>
            )}
        </div>
    )
}

export default InputField

Then I use this inside the following CompanyForm.tsx file:

<InputField 
  label="Balance" 
  name="balance" 
  type="number"
  defaultValue={0}
  register={register("balance", { valueAsNumber: true })} 
  error={errors?.balance} 
/>

I am not sure how to fix that or what I am missing here. Any help would be amazing thank you!

#Input error