React with TypeScript: how to create ref prop

Question

I am using Ionic with React (typescript) and I am creating my custom form builder. There I created my form that has to have a ref property, because I need a reference of it when I use it. My problem is that I don't know how to define a prop that is reference type for my custom form builder.

This is how I am using it:

const form = useRef<HTMLFormElement>(null);

return (
  <IonPage>
    <Header />
    <IonContent fullscreen>
      <Form
        ref={form}
        submit={() => onSubmit()}
        fields={ fields }
        render={() => (
          <React.Fragment>
            <IonCard>
              <IonCardHeader>
                <IonLabel>Valamilyen form</IonLabel>
              </IonCardHeader>
              <IonCardContent>
                <Field {...fields.name} />
              </IonCardContent>
            </IonCard>
          </React.Fragment>
        )}/>
    </IonContent>
    <Footer />
  </IonPage>
);

Here I got an error: Property 'ref' does not exist on type 'IntrinsicAttributes & IFormProps & IFormState & { children?: ReactNode; }'

My Form React.FC looks like this:

type formProps = IFormProps & IFormState;
    
export const Form: React.FC<formProps> = React.forwardRef<HTMLFormElement, formProps>( (props: formProps, porpsRef) => {
  return (
    <form onSubmit={handleSubmit} noValidate={true} ref={porpsRef} />
  );
)};

I need to add to my Form component a property named ref of the reference, but I don't know how.

Thanks

Mahmud · Accepted Answer · 2020-10-22 15:57:21Z

1

I think there is small mistake. Can you please try this

type formProps = IFormProps & IFormState;

export const Form: React.FC<formProps> = 
React.forwardRef<formProps, HTMLFormElement>( (props: 
formProps, porpsRef) =>
{
   return (
       <form onSubmit={handleSubmit} noValidate={true} ref= 
      {porpsRef} />
    );
 )};

answered Oct 22, 2020 at 15:57

Mahmud

413 bronze badges

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

2 Comments

Wasyster Over a year ago

I think that is not correct, but I tried, and that's not good.

Linda Paiste Over a year ago

No, it's counter-intuitive but forwardRef actually puts the generic for the ref before the generic for the props.

Linda Paiste · Accepted Answer · 2020-10-23 06:45:07Z

I just typed a very long answer to a similar question. In your case you seem to be making only one of those mistakes, which is declaring your Form as React.FC. The FC interface isn't aware of the ref forwarding that you've added with React.forwardRef so that's why you get an error when trying to pass a prop ref to it.

Delete this bit : React.FC<formProps> and you should be fine. You've already typed the generics on the React.forwardRef function, so typescript will know the return type and apply it to Form.

export const Form = React.forwardRef<HTMLFormElement, formProps>(...

If you wanted to explicitly declare the type, you can do that but it's a mouthful.

export const Form: React.ForwardRefExoticComponent<formProps & React.RefAttributes<HTMLFormElement>> = ...

(also you've forgotten to destructure handleSubmit from formProps)

Collectives™ on Stack Overflow

React with TypeScript: how to create ref prop

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related