Form handling in React - Step-by-Step Execution

Concept Flow - Form handling in React

User types in input

↓

onChange event triggers

↓

Update state with new input

↓

Component re-renders

↓

Input shows updated value

↓

User submits form

↓

onSubmit event triggers

↓

Handle form data (e.g., alert or send)

↓

Prevent default page reload

The flow shows how user input updates React state, causing re-render to reflect changes, and how form submission is handled without page reload.

Execution Sample

React

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

A simple React form that updates state as user types and alerts the name on submit without reloading.

Execution Table

Step	Action	State Before	Event	State After	Rendered Input Value	Output
1	Initial render	name = ''	none	name = ''	'' (empty input)	none
2	User types 'J'	name = ''	onChange with value 'J'	name = 'J'	'J'	none
3	User types 'Jo'	name = 'J'	onChange with value 'Jo'	name = 'Jo'	'Jo'	none
4	User types 'Jon'	name = 'Jo'	onChange with value 'Jon'	name = 'Jon'	'Jon'	none
5	User clicks Submit	name = 'Jon'	onSubmit event	name = 'Jon'	'Jon'	alert('Jon') shown
6	Form submission prevented	name = 'Jon'	onSubmit event with e.preventDefault()	name = 'Jon'	'Jon'	no page reload

💡 Form submission stops default reload; alert shows current input value.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
name	''	'J'	'Jo'	'Jon'	'Jon'	'Jon'

Key Moments - 3 Insights

Why does the input value update when I type?

Because onChange updates the state variable 'name' (see steps 2-4 in execution_table), and React re-renders the input with the new value.

Why doesn't the page reload when I submit the form?

Because e.preventDefault() is called in the onSubmit handler (step 6), stopping the browser's default reload behavior.

What happens if I don't set the input's value to the state variable?

The input becomes uncontrolled and won't reflect React state changes, breaking the connection between input and state (not shown in table but important).

Visual Quiz - 3 Questions

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

A 'Jo'

B 'Jon'

C 'J'

D ''

💡 Hint

Check the 'State After' column in row with Step 3.

At which step does the form submission alert show the input value?

A Step 4

B Step 6

C Step 5

D Step 2

💡 Hint

Look at the 'Output' column for alert in the execution_table.

If e.preventDefault() was removed, what would happen at step 6?

A The alert would not show

B The page would reload after submit

C The input value would reset to empty

D The state would change to empty string

💡 Hint

Refer to the 'exit_note' and step 6 explanation about preventing page reload.

Concept Snapshot

React form handling:
- Use useState to store input value
- onChange updates state with e.target.value
- Input's value prop set to state variable
- onSubmit handler prevents default reload
- Handle form data inside onSubmit
- Keeps UI and state in sync

Full Transcript

This visual trace shows how React handles form input and submission. When the user types, the onChange event updates the state variable 'name'. React re-renders the input with the updated value, keeping the UI and state synchronized. On form submission, the onSubmit event triggers, calling e.preventDefault() to stop the page from reloading. The current input value is then alerted. This flow ensures smooth user experience without page refreshes.

Practice

1. What is the main purpose of using useState in React form handling?

easy

A. To automatically validate form inputs

B. To style the form elements dynamically

C. To send form data directly to the server

D. To store and update the current value of form inputs

Solution

1. Step 1: Understand useState role in React

   useState is used to create a state variable that holds data and can be updated.

2. Step 2: Connect useState to form inputs

   In form handling, useState stores the current input value and updates it on user typing.

3. Final Answer:

   To store and update the current value of form inputs -> Option D

4. Quick Check:

   useState manages input values = A [OK]

Hint: useState holds input values and updates on change [OK]

Common Mistakes:

• Thinking useState styles elements
• Assuming useState sends data to server
• Confusing useState with validation logic

2. Which of the following is the correct way to update state on input change in React?

easy

A. onChange={(e) => setValue(e.target.value)}

B. onChange={() => setValue(e.value)}

C. onChange={(e) => setValue(e.target)}

D. onChange={(e) => setValue(e.currentTarget)}

Solution

1. Step 1: Identify correct event target usage

   The input value is accessed via e.target.value in event handlers.

2. Step 2: Confirm correct syntax for setState call

   Using setValue(e.target.value) updates state with the input's current value.

3. Final Answer:

   onChange={(e) => setValue(e.target.value)} -> Option A

4. Quick Check:

   Use e.target.value to get input value [OK]

Hint: Use e.target.value inside onChange to update state [OK]

Common Mistakes:

• Using e.value instead of e.target.value
• Passing e.target or e.currentTarget directly
• Omitting the event parameter e

3. What will be the output when the following React component is rendered and the user types 'Hi' in the input?

function GreetingForm() {
  const [name, setName] = React.useState('');
  return (
    <form>
      <input value={name} onChange={e => setName(e.target.value)} />
      <p>Hello, {name}!</p>
    </form>
  );
}

medium

A. The page reloads on typing

B. The paragraph shows 'Hello, Hi!' as user types 'Hi'

C. The paragraph remains empty regardless of input

D. The input clears automatically after typing

Solution

1. Step 1: Understand controlled input behavior

   The input value is controlled by state variable 'name' which updates on change.

2. Step 2: Observe paragraph rendering with state

   The paragraph displays 'Hello, {name}!' so it updates live as 'name' changes.

3. Final Answer:

   The paragraph shows 'Hello, Hi!' as user types 'Hi' -> Option B

4. Quick Check:

   Controlled input updates state and display = D [OK]

Hint: Controlled inputs update state and display live [OK]

Common Mistakes:

• Expecting input to clear automatically
• Thinking paragraph won't update
• Assuming page reloads on input change

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

function handleSubmit(e) {
  alert('Submitted');
}

What is missing to prevent the page from reloading on submit?

medium

A. Call e.preventDefault() inside handleSubmit

B. Use return false at the end of handleSubmit

C. Wrap alert in a setTimeout function

D. No error, the code works fine

Solution

1. Step 1: Understand default form submit behavior

   By default, form submission reloads the page unless prevented.

2. Step 2: Prevent default reload in React

   Calling e.preventDefault() inside the submit handler stops the reload.

3. Final Answer:

   Call e.preventDefault() inside handleSubmit -> Option A

4. Quick Check:

   Use e.preventDefault() to stop reload [OK]

Hint: Always call e.preventDefault() in submit handlers [OK]

Common Mistakes:

• Forgetting to pass event parameter e
• Using return false instead of preventDefault
• Assuming alert stops reload

5. You want to handle multiple input fields in one React form using a single state object. Which code snippet correctly updates the state for the changed input field?

const [formData, setFormData] = React.useState({ email: '', password: '' });

function handleChange(e) {
  // What goes here?
}

hard

A. setFormData({ e.target.name: e.target.value });

B. setFormData({ formData[e.target.name]: e.target.value });

C. setFormData({ ...formData, [e.target.name]: e.target.value });

D. setFormData({ [e.target.value]: e.target.name });

Solution

1. Step 1: Understand updating nested state objects

   To update one field in an object state, copy existing fields with spread operator.

2. Step 2: Use computed property name for dynamic key

   Use [e.target.name] to dynamically update the correct field with new value.

3. Final Answer:

   setFormData({ ...formData, [e.target.name]: e.target.value }); -> Option C

4. Quick Check:

   Spread old state + dynamic key update = B [OK]

Hint: Use spread and [e.target.name] to update form object state [OK]

Common Mistakes:

• Overwriting entire state without spreading
• Using invalid object key syntax
• Swapping name and value in update