issue while resetting the recaptcha - Cannot read property 'reset' of null for the code

Question

react-google-recaptcha version: 2.0.0-rc.1

I am having an issue while resetting the recaptcha

I am using a functional component

extracts of code as below

// imports etc.. here
const Login: NextPage = (props:any) => {

// othere initializations here...

const recaptchaInputRef:any = React.createRef();

const handleSubmit = async (event) => {

      // some if condition
     // and else
     // and inside there
     recaptchaInputRef.current.reset();

}

return (
        <React.Fragment>

               <form onSubmit={e => handleSubmit(e)}>

               // other components and elements

              <ReCAPTCHA
                 ref={recaptchaInputRef}
                 sitekey={props.recaptchaKey}
                 onChange={ onChange }
                 onExpired={ onExpired }
                 />

              <Button type="submit">Sign In</Button>
              </form>
        </React.Fragment>
);

now the issue is, I get - Cannot read property 'reset' of null for the code -> recaptchaInputRef.current.reset();

Answer 1

I changed the reference to the element as below:-

const recaptchaInputRef:any = useRef({});

// this is the new react hooks way of the reference declaration

This worked for me very well as required, but I would be happy to get better on this