onChange event not working after window.reacptcha.reset() in recaptcha v2 using react-google-recaptcha npm package - [recaptcha just keeps on loading]

Question

Im using npm react-google-recaptcha package for google recaptcha v2 check box implementation on my form page of the website

<ReCAPTCHA sitekey={KEY} onChange={this.captchaOnChange} />

once the captcha is verified Im triggering captchaOnChange function to record the response from google APIs and to set the trigger value true which is further used in my code (I have tried multiple versions of the below code with one only with async, one without async and one with async and await)

    captchaOnChange = async (value) => {
    this.setState({
      captchaValue: value,
      clicked: true,
    });
  };

And once the form is submitted Im using

window.grecaptcha.reset()

to reset the recaptcha

Now the problem is that when user clicks on the recaptcha for first time its working fine and instantly the green tick is visible on recaptcha but after submitting the form when captcha is reseted and user wants to submit the form once again and clicks on recaptcha there is no green tick, its loading continously like its trapped in some loop and also Im checking in the network tab of inspect elements there is no request being sent to any recaptcha api while its loading.

So I doubt if its some problem with onChange event after recaptcha.reset() is used, I have also found some people on internet reporting similar issue but Im not sure if its any issue or our implementation problem.

Please help!!

Answer 1

use it with Ref

import ReCAPTCHA from "react-google-recaptcha";
 
 
const ReCAPTCHAForm = (props) => {
  const recaptchaRef = React.useRef();
 
  const onSubmitWithReCAPTCHA = async () => {
    const token = await recaptchaRef.current.executeAsync();
 
    // apply to form data

    // reset the captcha 
    recaptchaRef.current.reset()
  }
 
  return (
    <form onSubmit={onSubmitWithReCAPTCHA}>
      <ReCAPTCHA
        ref={recaptchaRef}
        size="invisible"
        sitekey="Your client site key"
      />
    </form>
  )
 
}
 
ReactDOM.render(
  <ReCAPTCHAForm />,
  document.body
);

more info at package docs