How to use ref property in React component?

ref property is speacial property that can be passed only with forwardRef() function.

Example code:

import React, { forwardRef, useRef } from 'react';

const MyForm = forwardRef((props, ref) => {
    // some code here ...
    return (
        <form ref={ref}>
            {/* some JSX here ... */}
        </form>
    );
);

const App = () => {
    const formRef = useRef();
    return (
        <div>
          <MyForm ref={formRef} />
        </div>
    );
};

Where:

• props constains all Myform component properities except ref property,
• ref contains reference forwarded from outside.

See also

1. React - how to forward reference to component