Can't capture the form's submit event in a React app

Question

Here is a demo of my problem. This is a new app created from running CRA and only changing the App.js code to this:

import './App.css';
function App() {
  function getSubmit() {
    alert('submit!')
    return false
  }
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Test form submit capture.
        </p
        <form onsubmit={getSubmit}>
          Testing form submit <br />
          Click "submit": <br />
          <button type='submit'>
            Submit
          </button>
        </form>
      </header>
    </div >
  );
}
export default App;

It compiles and runs but the function "getSubmit" is not called. Running in debug mode, a breakpoint set there is not hit. The window tab flashes when I click Submit, but I can't read what's on it.

This the package.json if it would be helpful:

{
  "name": "formsubmit",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

This works because when you submit a form it reloads by default, so prevent default as below:

function getSubmit(event) {
  event.preventDefault();
  alert('submit!')
  return false
}

Answer 2

You are missing a closing '>' on one of your p tags but assuming that was just a copy error, I think your real problem is:

<form onsubmit={getSubmit}>

onsubmit doesn't mean anything to javascript, you need onSubmit

Also, you might want to pass in an event to your submit handler and prevent the default submit behavior of refreshing the page so you can see what's going on in your debugger.

  function getSubmit(event) {
    event.preventDefault()
    alert('submit!')
    return false
  }