4 replies

preventDefault() not preventing page refresh on form submit in React

I am currently building a form and somehow the page refreshes when the form is submitted, even though I call

preventDefault()

preventDefault()

preventDefault()

preventDefault() in

onSubmit

onSubmit

onSubmit

onSubmit.
Here is a minified version of my React form component:

import { FormEvent } from 'react';

function ContactForm() {
  function sendEmail(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    // send email logic
  }

  return (
    <form
      onSubmit={sendEmail}
    >
      <!-- input fields -->
      <button
        type="submit"
      >
        Submit
      </button>
    </form>

import { FormEvent } from 'react';

function ContactForm() {
  function sendEmail(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    // send email logic
  }

  return (
    <form
      onSubmit={sendEmail}
    >
      <!-- input fields -->
      <button
        type="submit"
      >
        Submit
      </button>
    </form>

import { FormEvent } from 'react';

function ContactForm() {
  function sendEmail(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    // send email logic
  }

  return (
    <form
      onSubmit={sendEmail}
    >
      <!-- input fields -->
      <button
        type="submit"
      >
        Submit
      </button>
    </form>

import { FormEvent } from 'react';

function ContactForm() {
  function sendEmail(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    // send email logic
  }

  return (
    <form
      onSubmit={sendEmail}
    >
      <!-- input fields -->
      <button
        type="submit"
      >
        Submit
      </button>
    </form>

Help is much appreciated!

preventDefault() not preventing page refresh on form submit in React

Similar Threads

Similar Threads

Similar Threads