Search:   Dictionary All Posts
Store Your Knowledge at the Brain Bank!

Setup React Contact Form with Google ReCaptcha v2

By Jamie in Lessons / Programming - React  3.10.19  (Source)
Summary - I recently added a contact form to my Power Todos app, these are my notes on how I achieved setup this form using Google's ReCaptcha and the react-google-recaptcha package.
You must have a site key - if you want to test on localhost, temporarily add 'localhost' to the allowed url's in Google's admin panel

npm install react-google-recaptcha

on Contact.js page...

import ReCAPTCHA from 'react-google-recaptcha'

const recaptchaRef = React.createRef();

handleSubmit = e => { 

    const recaptchaValue = recaptchaRef.current.getValue();   
    if(!recaptchaValue.length) {
        this.setState({ reply: 'You must not be a robot!' })

    ... rest of handleSubmit code


above submit button

    ref = {recaptchaRef}
    sitekey = "your site key"