How to reset Google recaptcha with react-google-recaptcha

First set up a suitably scoped variable for the element, then assign it using the ref callback:

let captcha;

<Recaptcha
  sitekey={sitekey}
  onChange={...}
  ref={el => { captcha = el; }}
/>

Then you're able to access the reset function by calling captcha.reset() when you need it (e.g. callback after successful message sent, registering etc.). Hope that helps.

You can try Reaptcha.

It has more of a react-way approach in dealing with the reCAPTCHA than react-google-recaptcha.

Quoting the documentation:

<Reaptcha
  ref={e => (this.captcha = e)}
  sitekey="YOUR_API_KEY"
  onVerify={() => {
    // Do something
  }}
/>
<button onClick={this.captcha.reset}>
  Reset
</button>

Well, this is just a bonus or a more elaborate way of all the above. I am using react-google-recaptcha so this is reactJS and not until I saw this that I found a way to solve the reset issue. It's rather straight forward. Am just explaining to mostly newbies like I think I am on how to do it just as pointed out by @sarneeh, @Chris and @AdityaSrivast

Here's my code snippet.

Captcha.js

import React from "react";
import ReCAPTCHA from "react-google-recaptcha";


const CaptchaVerify = ({yourprops}) => {

 let captcha;

 const onChange = (value) => {
    console.log(value);      
 }

 const setCaptchaRef = (ref) => {
    if (ref) {
      return captcha = ref;
    }
 };

 const resetCaptcha = () => {
   // maybe set it till after is submitted
   captcha.reset();
 }

 return (
   <ReCAPTCHA
     ref={(r) => setCaptchaRef(r) }
     sitekey={process.env.REACT_APP_V2_CAPTCHA_SITE_KEY}
     onChange={onChange, () => resetCaptcha()}
     theme="light"
   />
  )
 };

export default CaptchaVerify;

I was having a similar issue, and had to change it to:

window.grecaptcha.reset();