TypeError: can't define property “current”: Object is not extensible

Question

I have a react component InputField :

export default function InputField({ name, type, placeholder, className }, ref) {
  return (
    <input
      name={name}
      type={type}
      placeholder={placeholder}
      className={InputTailwindStyle}
      ref={ref}
    />
  );
}

and I try to put it inside another component LoginForm where I am using react-hook-form to handle my form hooks:

import { useForm } from 'react-hook-form';

(some code ... )

const { register, handleSubmit } = useForm();

<InputField
        name='password'
        type='password'
        placeholder='Password'
        ref={register}
/>

but I get this error: TypeError: cannot define property "current": Object is not extensible

Answer 1

You need to use React.forwardRef for property ref to be valid in function component:

function InputField({ name, type, placeholder, className }, ref) {
  return (
    <input
      name={name}
      type={type}
      placeholder={placeholder}
      className={`py-2 text-cTxt placeholder-gray-400 bg-transparent border-b-2 my-5 border-cBtn rounded px-2 ${className}`}
      ref={ref}
    />
  );
}

export default React.forwardRef(InputField);