Handling events in React - Step-by-Step Execution

Concept Flow - Handling events in React

User clicks button

↓

React event handler called

↓

Handler updates state

↓

React re-renders component

↓

DOM updates to show new state

When a user clicks a button, React calls the event handler, which updates the state, causing React to re-render the component and update the DOM.

Execution Sample

React

import React, { useState } from 'react';

function ClickCounter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}

export default ClickCounter;

A button that increases a counter each time it is clicked.

Execution Table

Step	Event	State Before	Action	State After	What Re-renders	DOM Change
1	Initial render	count = 0	Render button with count 0	count = 0	Button component	Button shows 'Clicked 0 times'
2	User clicks button	count = 0	Call onClick handler: setCount(1)	count = 1	Button component	Button updates to 'Clicked 1 times'
3	User clicks button	count = 1	Call onClick handler: setCount(2)	count = 2	Button component	Button updates to 'Clicked 2 times'
4	User clicks button	count = 2	Call onClick handler: setCount(3)	count = 3	Button component	Button updates to 'Clicked 3 times'
5	No more clicks	count = 3	No action	count = 3	No re-render	DOM unchanged

💡 Execution stops when user stops clicking; no further state changes or re-renders occur.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
count	0	1	2	3	3

Key Moments - 3 Insights

Why does the button text update after clicking?

Because the onClick handler calls setCount which updates the state, triggering React to re-render the button with the new count (see execution_table steps 2-4).

What happens if we don't use setCount inside the handler?

The state won't change, so React won't re-render the component, and the button text stays the same (no DOM change in execution_table step 5).

Why do we use an arrow function in onClick?

To define a function that runs only when clicked, not immediately during render. This is shown in the action column where the handler runs on event, not before.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'count' after the second click?

A 1

B 3

C 2

D 0

💡 Hint

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

At which step does the DOM update to show 'Clicked 3 times'?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look at the 'DOM Change' column for the text update in the execution_table.

If the onClick handler did not call setCount, what would happen?

A The count would stay the same and no re-render occurs

B The count would increase anyway

C The component would re-render with updated count

D React would throw an error

💡 Hint

Refer to the key_moments explanation about state updates and re-rendering.

Concept Snapshot

Handling events in React:
- Use onClick (or other event) props on elements.
- Pass a function to handle the event.
- Inside handler, update state with setState (e.g., setCount).
- State update triggers re-render.
- Component updates DOM to reflect new state.

Full Transcript

This example shows how React handles events using a button click. When the user clicks the button, React calls the onClick handler function. This function updates the state variable 'count' using setCount. React then re-renders the component with the new count value. The button text updates to show how many times it was clicked. If the handler does not update state, React does not re-render and the button text stays the same. The execution table traces each click event, state before and after, and the resulting DOM changes. This helps beginners see how event handling and state updates work together in React.

Practice

1. In React, how do you correctly attach a click event handler to a button?

easy

A. <button onclick="handleClick()">Click me</button>

B. <button onClick={handleClick}>Click me</button>

C. <button OnClick={handleClick}>Click me</button>

D. <button onClick="handleClick()">Click me</button>

Solution

1. Step 1: Understand React event naming

   React uses camelCase for event handlers, so onClick is correct, not lowercase or capitalized differently.

2. Step 2: Attach event handler as a function reference

   In React, event handlers are passed as functions, not strings. So {handleClick} is correct, not a string like "handleClick()".

3. Final Answer:

   <button onClick={handleClick}>Click me</button> -> Option B

4. Quick Check:

   React event handler syntax = <button onClick={handleClick}>Click me</button> [OK]

Hint: Use camelCase and pass function, not string, for events [OK]

Common Mistakes:

• Using lowercase event names like onclick
• Passing event handler as a string instead of function
• Capitalizing event names incorrectly

2. Which of the following is the correct syntax to define an event handler function inside a React functional component?

easy

A. const handleClick = () => console.log('Clicked');

B. handleClick = () => console.log('Clicked');

C. handleClick() => { console.log('Clicked'); }

D. def handleClick() { console.log('Clicked'); }

Solution

1. Step 1: Recognize JavaScript function syntax in React

   React functional components use JavaScript, preferring arrow functions declared with const for event handlers.

2. Step 2: Identify correct arrow function syntax

   const handleClick = () => console.log('Clicked'); is correct. Other options have syntax errors such as missing variable declaration or invalid syntax.

3. Final Answer:

   const handleClick = () => console.log('Clicked'); -> Option A

4. Quick Check:

   Arrow function syntax = const handleClick = () => console.log('Clicked'); [OK]

Hint: Use arrow functions for event handlers inside components [OK]

Common Mistakes:

• Using invalid function syntax like 'handleClick() => {}'
• Using Python syntax 'def' in JavaScript
• Not assigning function to a variable

3. What will be the output when the button is clicked in this React component?

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => setCount(count + 1);
  return (
    <button onClick={handleClick}>Clicked {count} times</button>
  );
}

medium

A. Button shows 'Clicked 0 times' initially and increments on each click

B. Button shows 'Clicked 1 times' initially and increments on click

C. Button shows 'Clicked 0 times' and never changes

D. Button causes a runtime error on click

Solution

1. Step 1: Understand useState initial value

   The state variable count starts at 0, so the button initially shows 'Clicked 0 times'.

2. Step 2: Analyze handleClick behavior

   Each click calls handleClick, which updates count by adding 1, so the displayed count increments on each click.

3. Final Answer:

   Button shows 'Clicked 0 times' initially and increments on each click -> Option A

4. Quick Check:

   useState increments count on click = Button shows 'Clicked 0 times' initially and increments on each click [OK]

Hint: useState updates UI on event, so count increments on clicks [OK]

Common Mistakes:

• Thinking state does not update on click
• Confusing initial state with updated state
• Expecting runtime errors from correct code

4. Identify the error in this React event handler code:

function MyButton() {
  const handleClick = () => {
    console.log('Clicked');
  }
  return <button onclick={handleClick}>Click me</button>;
}

medium

A. Missing parentheses when calling handleClick

B. Button element must be self-closing

C. Incorrect event name 'onclick' should be 'onClick'

D. handleClick function is not defined

Solution

1. Step 1: Check event handler attribute name

   React requires camelCase event names, so onclick is incorrect; it should be onClick.

2. Step 2: Verify function definition and usage

   The function handleClick is correctly defined and passed as a reference, so no error there.

3. Final Answer:

   Incorrect event name 'onclick' should be 'onClick' -> Option C

4. Quick Check:

   React event names are camelCase = Incorrect event name 'onclick' should be 'onClick' [OK]

Hint: React event names use camelCase, not lowercase [OK]

Common Mistakes:

• Using lowercase event names
• Forgetting to pass function reference
• Misunderstanding JSX syntax for elements

5. You want to create a React component that increments a counter only when the user presses the Enter key inside an input box. Which is the correct way to handle this event?

function EnterCounter() {
  const [count, setCount] = React.useState(0);
  const handleKeyDown = (event) => {
    // What condition should be here?
  };
  return (
    <>
      <input type="text" onKeyDown={handleKeyDown} aria-label="Enter key counter input" />
      <p>Count: {count}</p>
    </>
  );
}

hard

A. if (event.which === 'Enter') setCount(count + 1);

B. if (event.keyCode === 13) setCount(count + 1);

C. if (event.key === 13) setCount(count + 1);

D. if (event.key === 'Enter') setCount(count + 1);

Solution

1. Step 1: Identify the correct property for key detection

   Modern React and browsers use event.key as a string to detect keys, so checking event.key === 'Enter' is correct.

2. Step 2: Understand deprecated properties

   event.keyCode and event.which are deprecated or inconsistent; also, comparing event.key to a number like 13 is incorrect.

3. Final Answer:

   if (event.key === 'Enter') setCount(count + 1); -> Option D

4. Quick Check:

   Use event.key string for key detection = if (event.key === 'Enter') setCount(count + 1); [OK]

Hint: Use event.key === 'Enter' to detect Enter key presses [OK]

Common Mistakes:

• Using deprecated event.keyCode or event.which
• Comparing event.key to a number instead of string
• Not checking key inside keydown event