title: Google ReCaptcha: react-google-recaptcha not verifying correctly
body: <p>I have the following React component for a contact form:</p>
  
  <pre><code>import React from 'react'
  import ReCAPTCHA from "react-google-recaptcha";
  import {Container, Row, Col, Form, Button } from 'react-bootstrap'
  import '../styles/contact.css'
  
  class Contact extends React.Component {
  
      constructor(props, context) {
          super(props, context);
          this.state = {
              name: '',
              email: '',
              company: '',
              content: '',
              showSuccess: false,
              submitting: false,
              verified: false,
              reply: ''
          };
          this.handleSuccess = this.handleSuccess.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
          this.handleInputChange = this.handleInputChange.bind(this);
          this.onChange = this.onChange.bind(this);
        }
  
      onChange = (value) =&gt; {
          console.log("Captcha value:", value);
          this.setState({
              verified: true
          })
      };
  
  
      handleInputChange = event =&gt; {
          const target = event.target
          const value = target.value
          const name = target.name
          this.setState({
            [name]: value,
          })
      }
  
      handleSuccess = () =&gt; {
          this.setState({
              name: '',
              email: '',
              company: '',
              content: '',
              showSuccess: true,
              submitting: false,
          })
      }
  
      handleSubmit = event =&gt; {
  
          const url = 'https://xxxxxxxx.execute-api.eu-central-1.amazonaws.com/dev/email/send';
  
          this.setState({
              submitting: true
            })
  
          const payload = {
              name: this.state.name,
              email: this.state.email,
              company: this.state.company,
              content: this.state.content
          }
  
          if (this.state.verified) {
              fetch(url, {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify(payload),
              })
              .then(this.handleSuccess)
              .catch(error =&gt; alert(error))
              event.preventDefault()
          }
          else {this.setState({reply: "Please verify the ReCaptcha."})}
      }
  
      render() {
          return (
              &lt;section id="contact" name="#contact"&gt;
                  &lt;Container&gt;
                      &lt;Row className="align-items-center"&gt;
                          &lt;Col lg={{span: 5, order: 1}} xs={{ span: 12, order: 2}} className="form-background"&gt;
                              &lt;Form id="contact-form-bottom" onSubmit={this.handleSubmit}&gt;
                                  &lt;h4 className="h4"&gt;Don't be shy, say hi!&lt;/h4&gt;
                                  &lt;Form.Group controlId="formBasicEmail"&gt;
                                      &lt;Form.Label&gt;Full Name&lt;/Form.Label&gt;
                                      &lt;Form.Control 
                                          as="input" 
                                          type="text" 
                                          placeholder="Enter your first name &amp; surname" 
                                          name="name"
                                          value={this.state.name}
                                          onChange={this.handleInputChange}
                                          required
                                      /&gt;
                                  &lt;/Form.Group&gt;
                                  &lt;Form.Group controlId="formBasicEmail"&gt;
                                      &lt;Form.Label&gt;Email address&lt;/Form.Label&gt;
                                      &lt;Form.Control 
                                          as="input" 
                                          type="email" 
                                          placeholder="Enter your email address" 
                                          name="email"
                                          value={this.state.email}
                                          onChange={this.handleInputChange}
                                          required
                                      /&gt;
                                      &lt;Form.Text className="text-muted"&gt;
                                      We'll never share your email with anyone else.
                                      &lt;/Form.Text&gt;
                                  &lt;/Form.Group&gt;
                                  &lt;Form.Group controlId="formBasicEmail"&gt;
                                      &lt;Form.Label&gt;Company Name&lt;/Form.Label&gt;
                                      &lt;Form.Control 
                                          as="input" 
                                          type="text" 
                                          placeholder="Enter the name of your company" 
                                          name="company"
                                          value={this.state.company}
                                          onChange={this.handleInputChange}
                                          required
                                      /&gt;
                                  &lt;/Form.Group&gt;
                                  &lt;Form.Group controlId="exampleForm.ControlTextarea1"&gt;
                                      &lt;Form.Label&gt;Details&lt;/Form.Label&gt;
                                      &lt;Form.Control 
                                          as="textarea" 
                                          type="text" 
                                          rows="3" 
                                          placeholder="How can we help you?" 
                                          name="content"
                                          value={this.state.content}
                                          onChange={this.handleInputChange}
                                          required
                                      /&gt;
                                  &lt;/Form.Group&gt;
                                  &lt;ReCAPTCHA
                                      className="g-recaptcha"
                                      sitekey="XXXXXXXXXXXXXXXXXXX"
                                      onChange={this.onChange}
                                      theme="dark"
                                  /&gt;
                                  { this.state.verified ? &lt;p id="error" className="error"&gt;{this.state.reply}&lt;/p&gt; : null }
                                  { this.state.showSuccess ? &lt;p id="success" className="success"&gt;Thank you, we will be in touch asap.&lt;/p&gt; : null }
                                  &lt;Button id="submit" variant="primary" type="submit"&gt;
                                      Submit
                                  &lt;/Button&gt;
                              &lt;/Form&gt;
                          &lt;/Col&gt;
                      &lt;/Row&gt;
                  &lt;/Container&gt;
              &lt;/section&gt;
          )
      }
  }
  
  export default Contact
  
  </code></pre>
  
  <p><br/></p>
  
  <h3>Desired behaviour</h3>
  
  <p>I'm using <code>react-google-recaptcha</code> (<a href="https://www.npmjs.com/package/react-google-recaptcha" rel="nofollow noreferrer">https://www.npmjs.com/package/react-google-recaptcha</a>) for Recaptcha verification and inserted the component top of the submit button:</p>
  
  <pre><code>&lt;ReCAPTCHA
      className="g-recaptcha"
      sitekey="XXXXXXXXXXXXXXXXXXXXX"
      onChange={this.onChange}
      theme="dark"
  /&gt;
  </code></pre>
  
  <p>The onChange function should set <code>state.verfied == true</code></p>
  
  <pre><code>onChange = (value) =&gt; {
      console.log("Captcha value:", value);
      this.setState({
          verified: true
      })
  };
  
  </code></pre>
  
  <p>so that this part of <code>handledSubmit()</code> fires if the reCaptcha was completed and the form gets submitted without page reload:</p>
  
  <pre><code>if (this.state.verified) {
      fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
      })
      .then(this.handleSuccess)
      .catch(error =&gt; alert(error))
      event.preventDefault()
  }
  </code></pre>
  
  <p>otherwise it should render <code>this.state.reply: "Please verify the ReCaptcha."</code> above the submit button.</p>
  
  <p><br/></p>
  
  <h3>What it does instead</h3>
  
  <p>The submit button works without completing the reCaptcha and submits the form. It reloads the page to <code>http://localhost:8000/?name=Test&amp;email=test&amp;company=test&amp;content=test&amp;g-recaptcha-response=</code></p>
  
  <p>I know that my workaround using state probably isn't the correct way of using this module, but the <code>react-google-recaptcha</code> docs leave no hint on how to correctly integrate the verification with the reCaptcha API.</p>
  
  <p>Happy for any support on this. Thanks!</p>