Handling input fields in React - Step-by-Step Execution

Concept Flow - Handling input fields

Render input field

↓

User types in input

↓

onChange event triggers

↓

Update state with new value

↓

Component re-renders with updated value

↩Back to Render input field

The input field renders, user types, onChange updates state, then component re-renders showing new input.

Execution Sample

React

import React, { useState } from 'react';

function NameInput() {
  const [name, setName] = useState('');
  return <input value={name} onChange={e => setName(e.target.value)} />;
}

A React component that updates and shows the input field value as the user types.

Execution Table

Step	User Input	Event Triggered	State Before	Action	State After	Rendered Input Value
1	'' (empty)	No	''	None	''	''
2	'J'	Yes	''	setName('J')	'J'	'J'
3	'Jo'	Yes	'J'	setName('Jo')	'Jo'	'Jo'
4	'Joh'	Yes	'Jo'	setName('Joh')	'Joh'	'Joh'
5	'John'	Yes	'Joh'	setName('John')	'John'	'John'
6	User stops typing	No	'John'	None	'John'	'John'

💡 User stops typing, no onChange event, state remains 'John', input shows 'John'

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
name	''	'J'	'Jo'	'Joh'	'John'	'John'

Key Moments - 3 Insights

Why does the input value update only after onChange triggers?

Because React updates the state only when onChange fires, as shown in execution_table rows 2-5 where state changes after each event.

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

The input becomes uncontrolled and React won't update its displayed value, so changes won't reflect in the component's state or UI.

Why do we use e.target.value inside onChange?

Because e.target.value holds the current text typed by the user, which we need to save in state to keep input and state in sync.

Visual Quiz - 3 Questions

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

A 'Jo'

B 'J'

C ''

D 'Joh'

💡 Hint

Check the 'State After' column at step 3 in execution_table.

At which step does the input value first become 'John'?

A Step 4

B Step 5

C Step 3

D Step 2

💡 Hint

Look at the 'Rendered Input Value' column in execution_table.

If the onChange handler was removed, what would happen to the input value?

A It would cause an error

B It would update normally as user types

C It would never update from the initial empty string

D It would reset to empty on every keystroke

💡 Hint

Refer to key_moments about state updating only on onChange events.

Concept Snapshot

Handling input fields in React:
- Use useState to hold input value
- Set input's value prop to state variable
- Use onChange to update state with e.target.value
- Component re-renders showing updated input
- Keeps input and state in sync

Full Transcript

This example shows how React handles input fields. The component uses useState to keep the input's current text. When the user types, the onChange event fires, updating the state with the new text from e.target.value. React then re-renders the component, updating the input's displayed value. This cycle repeats as the user types, keeping the input and state synchronized. Without onChange updating state, the input would not reflect user typing.