appleboy/react-recaptcha

Recaptcha doesn't fully render to DOM

hantc opened this issue · 8 comments

hantc commented

When using recaptcha inside JSX, Recaptcha is not fully rendered. Div is blank.

<div class="g-recaptcha" data-sitekey="my-own-tested-and-valid-key" data-theme="light" data-type="image" data-size="normal" data-tabindex="0" data-reactid=".1.0.1.3"></div>

react-recaptcha is imported and rendered as <Recaptcha sitekey="my-own-tested-and-valid-key" />

filip-ph-johansson commented

Are you using the recaptcha script on your index-page?

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
  • 👍1
MrHash commented

Possibly same problem as #181

cindyloo commented

I am seeing this problem using React 15.4.1 on mac os in Chrome. Trying to solve for #181 does not work in my case

farskid commented

@hantc You can't embed script tag inside JSX. This just won't work. You should dynamically add the script tag to the HTML using Javascript. I've already opened an issue regarding this to be supported in the library out of the box!
Please refer to #212 for the workaround.

corydeppen commented

I ran into the empty div issue as well. I used scriptjs in componentDidMount and the script was added to the head and the reCAPTCHA rendered as expected.

$script('https://www.google.com/recaptcha/api.js', 'recaptcha');
  • 👍2
Hiti3 commented

I ran into the empty div issue as well. I used scriptjs in componentDidMount and the script was added to the head and the reCAPTCHA rendered as expected.

$script('https://www.google.com/recaptcha/api.js', 'recaptcha');

any example how to do so?

altyntsevlexus commented

Any updates on this issue?

Hiti3 commented

Any updates on this issue?

there is a nope from the community..

  • 😕1