Form submission handling in React

Introduction

Form submission handling lets your app collect and use information users type in forms. It helps you respond when users click submit.

When you want to get user input like names or emails.

When you need to check or save data users enter before moving on.

When you want to show a message after users send a form.

When you want to prevent the page from reloading on submit.

When you want to update your app based on what users typed.

Syntax

React

function handleSubmit(event) {
  event.preventDefault();
  // Your code to process form data
}

<form onSubmit={handleSubmit}>
  {/* form fields here */}
  <button type="submit">Submit</button>
</form>

Use event.preventDefault() to stop the page from reloading.

Attach your handler function to the form's onSubmit event.

Examples

This example shows a simple alert when the form is submitted.

React

function handleSubmit(event) {
  event.preventDefault();
  alert('Form submitted!');
}

<form onSubmit={handleSubmit}>
  <button type="submit">Submit</button>
</form>

This example collects a name and shows it in an alert when submitted.

React

import { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    alert(`Hello, ${name}!`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={e => setName(e.target.value)}
        placeholder="Enter your name"
        aria-label="Name"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Sample Program

This React component shows a simple email subscription form. When the user types an email and clicks submit, the page does not reload. Instead, it shows a thank you message below the form. The form uses accessible labels and required fields.

React

import React, { useState } from 'react';

export default function SimpleForm() {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    setMessage(`Thank you for submitting your email: ${email}`);
  }

  return (
    <main style={{ maxWidth: '400px', margin: '2rem auto', fontFamily: 'Arial, sans-serif' }}>
      <h1>Subscribe</h1>
      <form onSubmit={handleSubmit} aria-label="Email subscription form">
        <label htmlFor="emailInput">Email address:</label><br />
        <input
          id="emailInput"
          type="email"
          value={email}
          onChange={e => setEmail(e.target.value)}
          placeholder="[e-mail]"
          required
          aria-required="true"
          style={{ width: '100%', padding: '0.5rem', marginTop: '0.25rem', marginBottom: '1rem', fontSize: '1rem' }}
        />
        <button type="submit" style={{ padding: '0.5rem 1rem', fontSize: '1rem' }}>Submit</button>
      </form>
      {message && <p role="alert" style={{ marginTop: '1rem', color: 'green' }}>{message}</p>}
    </main>
  );
}

Important Notes

Always use event.preventDefault() to stop the page from refreshing on submit.

Use state to keep track of form input values.

Label your inputs clearly and use aria-label or htmlFor for accessibility.

Summary

Form submission handling lets you control what happens when users send a form.

Use onSubmit on the form and event.preventDefault() to stop page reload.

Use state to read and respond to user input.

Practice

1. What does event.preventDefault() do in a React form submission handler?

easy

A. It automatically submits the form data to the server.

B. It stops the browser from reloading the page when the form is submitted.

C. It clears all the input fields in the form.

D. It resets the component's state to initial values.

Solution

1. Step 1: Understand default form behavior

   By default, submitting a form reloads the page to send data to the server.

2. Step 2: Role of event.preventDefault()

   This method stops the default reload so you can handle submission in React code.

3. Final Answer:

   It stops the browser from reloading the page when the form is submitted. -> Option B

4. Quick Check:

   event.preventDefault() = stops reload [OK]

Hint: Remember: preventDefault stops page reload on submit [OK]

Common Mistakes:

• Thinking preventDefault clears inputs
• Assuming preventDefault submits data automatically
• Confusing preventDefault with resetting state

2. Which of the following is the correct way to attach a submit handler to a form in React?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check React event naming conventions

   React uses camelCase for event handlers, so it must be onSubmit.

2. Step 2: Validate JSX syntax

   Attributes are case-sensitive; onsubmit is incorrect, must be onSubmit.

3. Final Answer:

   <form onSubmit={handleSubmit}> -> Option A

4. Quick Check:

   React event handlers use camelCase = onSubmit [OK]

Hint: React events use camelCase like onSubmit, not lowercase [OK]

Common Mistakes:

• Using lowercase onsubmit instead of onSubmit
• Using non-existent attributes like submit or onsubmitHandler
• Forgetting curly braces around handler function

3. What will be logged to the console when the form below is submitted?

function MyForm() {
  const [name, setName] = React.useState('');
  function handleSubmit(event) {
    event.preventDefault();
    console.log(name);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={e => setName(e.target.value)} />
      <button type="submit">Send</button>
    </form>
  );
}

medium

A. The current value typed in the input field.

B. An empty string always.

C. Undefined because name is not set.

D. The string 'Send' from the button.

Solution

1. Step 1: Understand controlled input behavior

   The input's value is linked to state variable name, updated on every change.

2. Step 2: What happens on submit?

   On submit, handleSubmit logs the current name state, which matches input content.

3. Final Answer:

   The current value typed in the input field. -> Option A

4. Quick Check:

   Controlled input state logs current input [OK]

Hint: Controlled inputs keep state updated; submit logs that state [OK]

Common Mistakes:

• Assuming name is always empty on submit
• Confusing button text with input value
• Forgetting to call event.preventDefault()

4. Identify the error in this React form submission code:

function Form() {
  const [email, setEmail] = React.useState('');
  function handleSubmit() {
    event.preventDefault();
    alert(email);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

medium

A. Button type should be 'button' not 'submit'.

B. Using alert instead of console.log is not allowed.

C. Input value should not be controlled by state.

D. Missing event parameter in handleSubmit function.

Solution

1. Step 1: Check handleSubmit parameters

   The function uses event.preventDefault() but does not receive event as a parameter.

2. Step 2: Why is this a problem?

   Without event parameter, event is undefined, causing a runtime error.

3. Final Answer:

   Missing event parameter in handleSubmit function. -> Option D

4. Quick Check:

   Event must be passed to handler to call preventDefault [OK]

Hint: Always include event parameter to use event.preventDefault() [OK]

Common Mistakes:

• Forgetting to add event parameter
• Thinking alert is disallowed
• Confusing button types for form submission

5. You want to submit a form and then clear the input fields after submission. Which code snippet correctly handles this in React?

function ContactForm() {
  const [message, setMessage] = React.useState('');
  function handleSubmit(event) {
    event.preventDefault();
    console.log(message);
    // What goes here?
  }
  return (
    <form onSubmit={handleSubmit}>
      <textarea value={message} onChange={e => setMessage(e.target.value)} />
      <button type="submit">Send</button>
    </form>
  );
}

hard

A. message = ''; // Directly assign to state variable

B. event.target.reset(); // Reset form DOM directly

C. setMessage(''); // Reset state to empty string

D. window.location.reload(); // Reload page to clear form

Solution

1. Step 1: Understand controlled components

   The textarea's value is controlled by React state message, so clearing input means resetting this state.

2. Step 2: Why setMessage('') works best

   Calling setMessage('') updates state to empty string, clearing the textarea in UI.

3. Final Answer:

   setMessage(''); // Reset state to empty string -> Option C

4. Quick Check:

   Reset controlled input by updating state [OK]

Hint: Clear controlled inputs by setting state to empty string [OK]

Common Mistakes:

• Trying to assign directly to state variable
• Using event.target.reset() which doesn't update React state
• Reloading page instead of clearing state