React recaptcha google not showing at all

nickornotto

I have installed react-recaptcha-google and added to my app as per the example here: https://medium.com/codeep-io/how-to-use-google-recaptcha-with-react-38a5cd535e0d

Nothing is showing up though, no error, no nothing.

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

import { ReCaptcha } from 'react-recaptcha-google';

class MyComponent extends Component {
    constructor(props, context) {
        super(props, context);

    componentDidMount() {
        this.getProducts();

        if (this.captchaDemo) { // <- this is getting skipped
            console.log("started, just a second...")
            this.captchaDemo.reset();
            //this.captchaDemo.execute();
        }
    }

    onLoadRecaptcha() {
        if (this.captchaDemo) {
            this.captchaDemo.reset();
            //this.captchaDemo.execute();
        }
    }

    verifyCallback(recaptchaToken) {
        // Here you will get the final recaptchaToken!!!  
        console.log(recaptchaToken, "<= your recaptcha token")

    render() {
        return (
            <div className="row">
                                    <ReCaptcha
                                        ref={(el) => { this.captchaDemo = el; }}
                                        size="normal"
                                        render="explicit"
                                        sitekey="our correct key"
                                        onloadCallback={this.onLoadRecaptcha}
                                        verifyCallback={this.verifyCallback}
                                    />

            </div>
        );
    }
}

ReactDOM.render(<MyComponent />, document.getElementById('myComponent'));

The condition in the componentDidMount() also is getting skipped.

I have run out of ideas what to do in order for it to work. Any suggestions?

I also tried:

  • react-recaptcha (<- this one is the same - showing nothing) and

  • react-google-recaptcha (<- this one generates an error)

Our key is correct 100% as we use it for other captchas (written in Razor) on the same site.

nickornotto

Ive just figured it out - I was missing

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

on the page, added and the captcha shows up.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Google Recaptcha is not showing after click on radio button

From Dev

Google reCaptcha not showing in Angular 2 app

From Dev

How to reset Google recaptcha with react-google-recaptcha

From Dev

Google ReCaptcha: react-google-recaptcha not verifying correctly

From Dev

reCAPTCHA not showing

From Dev

Google reCaptcha to work in React.js?

From Dev

react-google-recaptcha : Setting window attributes in React-Redux

From Dev

React Google Map InfoWindow showing all the info when I click on a single Mark

From Dev

useState with react giving me issues with onChange handler for google recaptcha

From Dev

Google Maps marker title not showing all content

From Java

Google maps not showing all of a sudden in Android

From Dev

Picasa API not showing all google photos albums

From Dev

Google maps Satellite view is not showing all labels

From Dev

Google ComboChart not showing all data rows

From Dev

Google Analytics Ecommerce Metrics Showing All Zeros

From Dev

React show toggle showing all children

From Dev

React event currentTarget textContent showing all values

From Dev

React "Unexpected token" or not showing anything at all

From Dev

React big-calendar not showing or loading at all

From Dev

google-map-react not showing up

From Dev

Confirmation page is not showing in Google pay integration in React

From Dev

Google reCAPTCHA in China

From Dev

Google reCaptcha with php validation

From Dev

Using Google ReCaptcha on angular

From Dev

Google reCAPTCHA with Spring WebFlow

From Dev

Invisible Google reCaptcha with AngularJS

From Dev

PHP form + Google reCAPTCHA

From Dev

Google Recaptcha not working with axios

From Dev

Verify google reCaptcha fails

Related Related

HotTag

Archive