why is form not submitting when using create-react

Question

My google auth button was working fine before I migrated to using create-react-app. when I switch to CRA, the form is not being submitted to the server and instead it seems like the app is pushing the new path in the action attribute to the history. Does CRA automatically disables form submission somehow? is there a work around? Thanks!

this is the form:

<form method="get" action="/aoth/google" className="google-form">
      <input type="submit" className="google-login" value="Google+" />
</form>

Answer 1

Here's a simple snippet showing how to handle form submission. Hope that helps.

class App extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const data = new FormData(form);
    for (let name of data.keys()) {
      const input = form.elements[name];
      console.log(input);
      console.log(input.value);
    }
    
    fetch('/aoth/google', {
      method: 'GET',
      body: data,
    });
  }

    render() {
      return (
        <form onSubmit={this.handleSubmit} className="google-form">
              <input id="username" name="username" type="text" />
              <input type="submit" className="google-login" value="Google+" />
        </form>
      );
   }
}

ReactDOM.render( < App / > ,
  document.getElementById('root')
)

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<div id="root" />