search

appleboy / react-recaptcha

A react.js reCAPTCHA for Google
https://www.google.com/recaptcha/intro/index.html
BSD 3-Clause "New" or "Revised" License
635 stars 97 forks source link

Recaptcha doesn't fully render to DOM #147

Open hantc opened 8 years ago

hantc commented 8 years ago

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 8 years ago

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

MrHash commented 7 years ago

Possibly same problem as #181

cindyloo commented 7 years ago

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 7 years ago

@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 https://github.com/appleboy/react-recaptcha/issues/212 for the workaround.

corydeppen commented 6 years ago

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');
Hiti3 commented 3 years ago

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 2 years ago

Any updates on this issue?

Hiti3 commented 2 years ago

Any updates on this issue?

there is a nope from the community..