Setup React Contact Form with Google ReCaptcha v2

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 => { 
    e.preventDefault()

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

    ... rest of handleSubmit code

}

above submit button

<ReCAPTCHA
    ref = {recaptchaRef}
    sitekey = "your site key"
/>