calling ref.current.execute() in functional component fails to produce any results.

react-google-recaptcha version: 2.1.0 react-async-script version: 1.2.0

I have the most simple setup and I cannot seem to get it to work:

import React, { useRef, useState } from "react";
import { ReCAPTCHA } from "react-google-recaptcha";

export default function App() {
  const captchaRef = useRef();
  const [text, setText] = useState("Start editing to see some magic happen!");
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>{text}</h2>
      <button
        onClick={(event) => {
          setText("yes. it was a click");
          captchaRef.current.execute();
        }}
      >
        Click me
      </button>
      <ReCAPTCHA
        ref={captchaRef}
        sitekey="6LcYD3EaAAAAAM2GZpkWsEiCPTSMfAzSXiuG4k36"
        onChange={(value) => {
          setText(`There you go ${value}`);
        }}
        size="invisible"
      />
    </div>
  );
}

or check out the codesandbox

The problem is, that the current.execute never does anything. Clicking the button never fires any request. At the same time, a similar example seems to work just fine: https://codesandbox.io/s/gifted-cache-10q74jj593?file=/src/index.js

So what am I missing here? Is’nt my example even more dumbed down and simpler… have I forgot something?

[hartzis]

@OdifYltsaeb Thank you for the issue and the codesandbox example, it was incredibly helpful.

I was able to dig into the issue on your codesandbox and after a few minutes of complete bewilderment, I took a step back and started from the top.

Then I noticed the imports. ReCAPTCHA needs to be imported as the default.

- import { ReCAPTCHA } from "react-google-recaptcha";
+ import ReCAPTCHA from "react-google-recaptcha";

This fixes the issue in that sandbox example because the default export is wrapped in an HOC, react-async-script, that loads the google recaptcha javascript package.

This issue highlights some improvements we could make to improve the experience moving forward.

Some💡’s:

• Add warnings/logs in dev mode when grecaptcha is not loaded and methods are being called
  • ie: manually trigger execute but google recaptcha script is not loaded
• Curious if we can get @dozoisch thoughts on removing the default export completely and only have named exports for v3?

[q00u]

I still have this problem, and I’m importing as the default.

Edit: Only for invisible recaptcha. Visible recaptcha works perfectly. Invisible recaptcha, calls to current.executeAsync() vanish into the void. No errors, no .then or .catch, just silence. current.execute() likewise does nothing.