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!!
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