Form submission handling in React - Step-by-Step Execution

Concept Flow - Form submission handling

User fills form fields

↓

User clicks submit button

↓

Form onSubmit event triggers

↓

Prevent default page reload

↓

Read form data from state

↓

Process or send data

↓

Show confirmation or reset form

This flow shows how a React form captures user input, prevents page reload on submit, processes data, and updates UI.

Execution Sample

React

function MyForm() {
  const [name, setName] = React.useState('');
  function handleSubmit(e) {
    e.preventDefault();
    alert(`Name submitted: ${name}`);
  }
  return <form onSubmit={handleSubmit}><input value={name} onChange={e => setName(e.target.value)} /><button type="submit">Submit</button></form>;
}

A React form component that captures a name, prevents page reload on submit, and shows an alert with the submitted name.

Execution Table

Step	Event	State Before	Action	State After	UI Change
1	User types 'A' in input	name = ''	onChange sets name to 'A'	name = 'A'	Input shows 'A'
2	User types 'l'	name = 'A'	onChange sets name to 'Al'	name = 'Al'	Input shows 'Al'
3	User types 'i'	name = 'Al'	onChange sets name to 'Ali'	name = 'Ali'	Input shows 'Ali'
4	User clicks Submit	name = 'Ali'	handleSubmit called, preventDefault runs, alert shows 'Name submitted: Ali'	name = 'Ali'	Alert popup appears
5	Form submission ends	name = 'Ali'	No page reload, form stays with current input	name = 'Ali'	Form remains visible with 'Ali' in input

💡 Form submission handled without page reload; alert shown; form state unchanged.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
name	''	'A'	'Al'	'Ali'	'Ali'	'Ali'

Key Moments - 3 Insights

Why do we call e.preventDefault() in handleSubmit?

Calling e.preventDefault() stops the browser from reloading the page on form submit, so React can handle the data without losing state, as shown in step 4 of the execution_table.

How does the input field update as the user types?

Each onChange event updates the 'name' state with the input's current value, which then updates the input's displayed value, as seen in steps 1-3 in the execution_table.

Why does the form not clear after submission?

Because the state 'name' is not reset after submission, the input keeps showing the last typed value, as shown in step 5 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'name' after step 2?

A 'A'

B 'Ali'

C 'Al'

D ''

💡 Hint

Check the 'State After' column for step 2 in the execution_table.

At which step does the form submission prevent the page reload?

A Step 4

B Step 3

C Step 1

D Step 5

💡 Hint

Look for the step where handleSubmit is called and preventDefault runs.

If we added setName('') inside handleSubmit after alert, what would change in the variable_tracker?

A The 'name' value would stay 'Ali' after step 4

B The 'name' value would reset to '' after step 4

C The 'name' value would become undefined

D No change in 'name' value

💡 Hint

Consider how state updates after submission affect the variable_tracker values.

Concept Snapshot

React form submission:
- Use onSubmit on <form> to handle submit
- Call e.preventDefault() to stop page reload
- Use state to track input values
- Update state on input change
- Process data in submit handler
- Optionally reset state after submit

Full Transcript

This visual trace shows how a React form works step-by-step. The user types into an input, which updates the component's state. When the user clicks submit, the onSubmit handler runs, calling e.preventDefault() to stop the page from reloading. The handler then processes the data, here showing an alert with the submitted name. The form stays visible with the input value unchanged because the state is not reset. This flow helps beginners understand how React manages form data and submission without losing page state.

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