Modified version of Netlify's form handler

react-form-handling.js

import React from 'react'

/* Handling a Form */
class Form extends React.Component {

  // Set up a state object that's just empty
  // You'll see why it's empty in handleChange
  constructor(props) {
    super(props);
    this.state = {};
  }

  // You tie onChange in the render to this method
  // handleChange takes the active event (which is whatever somebody is typing)
  // And it updates the state object
  // This is a shorthand but notice how the keys are being made
  // We're looking at the event target's name 
  // The wrapper [] is a dynamic way to create key names
  // This is called a computed property name:
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names
  handleChange = (e) => {
    this.setState({[e.target.name]: e.target.value});
  }

  // If you want to take the data and submit it...
  // Build a fetch like normal, with method, headers and body
  // Notice how body works - it references encode() check below how that works
  // The only weird part here is `, ...this.state`
  // The spread operator takes each key/value in state and passes it into the encode function
  // This is a destructing move
  handleSubmit = (e) => {
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "annual-report-signup-form", ...this.state })
    })
      .then( () => {
        // This just makes things pretty...
        document.getElementById("signup-submission").classList.add('hide-form')
        document.getElementById("signup-result").classList.add('show-form-thanks')
      })
      .catch(
        // Janky error handling but you get the idea
        error => alert("We couldn't add you to the list. Try again and if the problem persists, email xyx@abc.com and we'll manually add you to the list.")
      );

    e.preventDefault();
  };

  // Render is pretty simple honestly
  // Only this is notice how onChange synce with handleChange() above 
  render() {
    return (
      <FormItself id="pfb-signup-submission" name="annual-report-signup-form" data-netlify="true" data-netlify-honeypot="bot-field" onSubmit={ this.handleSubmit }>
        <Hidden>
          Don’t fill this out: <input name="bot-field" />
        </Hidden>
        <InputGroup>
          <InputBox type="text" name="first-name" id="signup-box-fname" placeholder="First Name" onChange={ this.handleChange } /> 
          <InputBox type="text" name="last-name" id="signup-box-lname" placeholder="Last Name" onChange={ this.handleChange } />
        </InputGroup>
        <InputGroupLast>
          <InputBox type="email" name="email" id="signup-box-email" placeholder="Email" onChange={ this.handleChange } /> 
          <InputBox type="text" name="zip-code" id="signup-box-zip" placeholder="Zip Code" onChange={ this.handleChange } />
        </InputGroupLast>
        <input type="hidden" name="form-name" value="annual-report-signup-form" />
        <InputSubmit type="submit" className="submit-button" value="Sign Up" id="pfb-signup-button" />
      </FormItself>
    )
  }
}

// This is kind of an extra but you usually need to encode your data before sending it across the wire
// This is a utility function that accomplishes that
// handleSubmit calls encode per react state key, loops through each one
// 
// we're then leveraging encodeURIComponent:
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
// This just changes the format into something that can be transferred easily via HTTP
// You've seen this syntax a million times in your URL window:
// ie: https://www.google.com/search?q=encodeuricomponent&rlz=1C5CHFA_enUS855US856&oq=encodeURI&aqs=chrome.0.0j69i57j0l6.1784j1j4&sourceid=chrome&ie=UTF-8
// What this function is creating is: key=value&key2=value2& 
function encode(data) {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
    .join("&");
}