React submit form returns event.preventDefault is not a function

Question

I'm having a problem with a simple form registration submit. Here's the code:

import React from 'react';

import {register} from 'Util/api'

function Registration() {
  const [email, setEmail] = React.useState("")
  const [password, setPassword] = React.useState("")
  const [passwordCheck, setPasswordCheck] = React.useState("")
  const [error, setError] = React.useState("")

  const register = event => {
    event.stopPropagation()
    event.preventDefault()

    register(email, password, passwordCheck).then(res => {
      console.log(res)
    }).catch(error => {
      console.log(error)
    })
  }

  return (
    <div>
      <form onSubmit={register}>
        <div>
          <label>Email:
            <input
              type="text"
              placeholder="Email"
              value={email}
              onChange={ev => setEmail(ev.target.value)}
            />
          </label>
        </div>
        <div>
          <label>Password:
            <input
              type="password"
              placeholder="Password"
              value={password}
              onChange={ev => setPassword(ev.target.value)}
            />
          </label>
        </div>
        <div>
          <label>Repeat password:
            <input
              type="password"
              placeholder="Repeat password"
              value={passwordCheck}
              onChange={ev => setPasswordCheck(ev.target.value)}
            />
          </label>
        </div>
        <button type="submit" value="Submit">Register</button>
        {error && (
          <div>{error}</div>
        )}
      </form>
    </div>
  );
}

export default Registration

When I click the button "register" the console returns the error:

Registration.js:12 Uncaught TypeError: event.stopPropagation is not a function

Same thing happen with event.preventDefault if I delete that line. It looks very similar to the example in the doc here ...

What's wrong with my code?

Answer 1

You have a name collision - there are 2 identifiers named register :

import {register} from 'Util/api'

and

const register = event => {
  event.stopPropagation()
  event.preventDefault()

  register(email, password, passwordCheck).then(res => {

In the second code, you want to refer to the imported function, not the handler, but since the handler is lexically closer, register refers to the handler there - it calls itself recursively, with a first parameter of email , which is not actually an event, so stopPropagation and preventDefault can't be called on it.

Use a different name:

const handleSubmit = event => {
  event.stopPropagation()
  event.preventDefault()

  register(email, password, passwordCheck).then(res => {
    console.log(res)
  }).catch(error => {
    console.log(error)
  })
}

<form onSubmit={handleSubmit}>

Answer 2

You have two register. Please change

const register = event =>

to

const submitHandler = event =>

and

<form onSubmit={register}>

to

<form onSubmit={submitHandler}>