Handling events in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

How do you attach a click event handler to a button in React?

Use the onClick attribute with a function, like <button onClick={handleClick}>Click me</button>. React uses camelCase for event names.

intermediate

Why do we often use arrow functions or bind methods when passing event handlers in React?

Because event handlers lose the correct this context if not bound. Arrow functions keep this from the surrounding scope, ensuring the handler works as expected.

beginner

What is the difference between onClick={handleClick()} and onClick={handleClick} in React?

onClick={handleClick} passes the function to be called on click. onClick={handleClick()} calls the function immediately during render, which is usually wrong.

beginner

How can you access the event object in a React event handler?

React passes the event object as the first argument to the handler function, e.g., <code>function handleClick(event) { /* use event here */ }</code>.

intermediate

What is synthetic event in React?

React wraps native browser events in a synthetic event to provide consistent behavior across browsers. It has the same interface as native events but works the same everywhere.

Which attribute is used to handle a click event in React?

A onClick

B onclick

C clickHandler

D handleClick

React uses camelCase event names like onClick.

What happens if you write onClick={handleClick()} instead of onClick={handleClick}?

A It causes a syntax error

B The function runs immediately during render

C The function runs only when clicked

D Nothing happens

Using parentheses calls the function immediately instead of passing it as a handler.

How do you access the event object in a React event handler?

A It is passed as the first argument to the handler function

B You must import it separately

C It is a global variable

D React does not provide an event object

React passes the event object as the first argument to event handlers.

Why use arrow functions for event handlers in React?

A To avoid syntax errors

B To make the code run faster

C To keep the correct this context

D Arrow functions are required by React

Arrow functions keep the surrounding this context, avoiding bugs.

What is a synthetic event in React?

A A fake event that does nothing

B A deprecated React feature

C An event only used in testing

D A wrapper around native events for cross-browser consistency

Synthetic events wrap native events to behave the same across browsers.

Explain how to add a click event handler to a button in React and why binding or arrow functions are important.

Think about how JavaScript functions handle 'this' inside React components.

Describe what a synthetic event is in React and why it is useful.

Consider how different browsers handle events differently.

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