Custom input component with React Hook Form 7

Question

So I have this component:

const TextInput = ({ type = 'text', fullWidth = false, ...rest }) => {
  return (
    <input
      type={type}
      className={`text-input ${classNames([fullWidth, 'fullwidth'])}`}
      {...rest}
    />
  );
};

and then I have this code:

const { register } = useForm();

//then in the return
<TextInput type='email' fullWidth {...register('email')} />

And I'm getting this error:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

How can I solved this? From what I looked I have to pass refs to the input but I don't know how to do this..

user3869304 · Accepted Answer · 2022-10-16 07:06:40Z

2

const TextInput = ({ register ,name,type = 'text', fullWidth = false, ...rest }) => {
  return (
    <input
      type={type}
      {...register(name)}
      className={`text-input ${classNames([fullWidth, 'fullwidth'])}`}
      {...rest}
    />
  );
};

And then you can do

const { register } = useForm();

//then in the return
<TextInput type='email' fullWidth register={register} />

answered Oct 16, 2022 at 7:06

user3869304

8732 gold badges13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nick · Accepted Answer · 2022-03-19 18:32:18Z

1

Okay so what I needed to do is use forwardRef like this:

const TextInput = React.forwardRef(({ type = 'text', fullWidth = false, ...rest }, ref) => {
  return (
    <input
      type={type}
      className={`text-input ${classNames([fullWidth, 'fullwidth'])}`}
      {...rest}
    />
  );
});

answered Mar 19, 2022 at 18:32

nick

3,3076 gold badges44 silver badges86 bronze badges

Collectives™ on Stack Overflow

Custom input component with React Hook Form 7

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related