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.