Synthetic events in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to handle a click event on the button.

React

function ClickButton() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click me</button>;
}

Drag options to blanks, or click blank then click option'

AhandleClickEvent

BhandleClick

CclickHandler

DhandleClick()

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses after the function name causing immediate call.

Using a wrong function name that is not defined.

The onClick attribute expects a function reference, so you pass handleClick without parentheses.

2fill in blank

medium

Complete the code to access the event object in the click handler.

React

function ClickLogger() {
  function handleClick([1]) {
    console.log([1].type);
  }

  return <button onClick={handleClick}>Log Event</button>;
}

Drag options to blanks, or click blank then click option'

Aevent

Bclick

Cevt

De

Attempts:

3 left

💡 Hint

Common Mistakes

Not including a parameter to receive the event object.

Using a parameter name that is not used inside the function.

The event object is commonly named e or event. Here, e is used as the parameter to access event properties.

3fill in blank

hard

Fix the error in the code to prevent the default form submission behavior.

React

function FormSubmit() {
  function handleSubmit(event) {
    [1];
    alert('Form submitted!');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

Drag options to blanks, or click blank then click option'

Aevent.preventDefault()

Bevent.stopPropagation()

Cevent.defaultPrevented()

Devent.prevent()

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like prevent() or defaultPrevented().

Using stopPropagation() which only stops event bubbling.

Calling event.preventDefault() stops the form from submitting and refreshing the page.

4fill in blank

hard

Fill both blanks to update state with the input value on change.

React

import { useState } from 'react';

function TextInput() {
  const [text, setText] = useState('');

  function handleChange([1]) {
    setText([2].target.value);
  }

  return <input type="text" value={text} onChange={handleChange} aria-label="Text input" />;
}

Drag options to blanks, or click blank then click option'

Ae

Bevent

Cevt

Dinput

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the event parameter and inside the function.

Trying to access value without the event object.

The event object is commonly named e. We use e.target.value to get the input's current value.

5fill in blank

hard

Fill all three blanks to create a button that toggles a message on click using state and synthetic events.

React

import { useState } from 'react';

function ToggleMessage() {
  const [visible, setVisible] = useState(false);

  function handleClick([1]) {
    setVisible(prev => ![2]);
  }

  return (
    <>
      <button onClick=[3] aria-pressed={visible} aria-label="Toggle message">
        Toggle Message
      </button>
      {visible && <p>The message is now visible.</p>}
    </>
  );
}

Drag options to blanks, or click blank then click option'

Ae

Bvisible

ChandleClick

Devent

Attempts:

3 left

💡 Hint

Common Mistakes

Not passing the event parameter to the handler function.

Using the wrong state variable name inside the toggle.

Passing the handler call instead of the function reference to onClick.

The event parameter is named e. We toggle the visible state by negating it. The button's onClick uses the handleClick function.

Practice

1. What is the main purpose of React's SyntheticEvent?

easy

A. To provide a consistent event interface across different browsers

B. To replace native DOM events with custom events

C. To speed up event handling by skipping the event queue

D. To allow events only on class components

Solution

1. Step 1: Understand SyntheticEvent role

   React's SyntheticEvent wraps native browser events to normalize differences across browsers.

2. Step 2: Compare options

   To provide a consistent event interface across different browsers correctly states the purpose. Options A, C, and D are incorrect because SyntheticEvent does not replace native events, does not skip event queues, and works with functional components too.

3. Final Answer:

   To provide a consistent event interface across different browsers -> Option A

4. Quick Check:

   SyntheticEvent = consistent cross-browser event [OK]

Hint: SyntheticEvent normalizes events across browsers [OK]

Common Mistakes:

• Thinking SyntheticEvent replaces native events
• Believing SyntheticEvent only works with class components
• Assuming SyntheticEvent speeds up event handling

2. Which of the following is the correct way to attach a click event handler in React using Synthetic events?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Recall React event naming conventions

   React uses camelCase for event handlers, so the correct attribute is onClick.

2. Step 2: Check each option

   <button onClick={handleClick}>Click me</button> uses onClick correctly. <button onclick={handleClick}>Click me</button> uses lowercase onclick which is invalid in JSX. <button OnClick={handleClick}>Click me</button> has incorrect capitalization. <button on-click={handleClick}>Click me</button> uses hyphen which is invalid.

3. Final Answer:

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

4. Quick Check:

   React event handlers use camelCase like onClick [OK]

Hint: React events use camelCase like onClick [OK]

Common Mistakes:

• Using lowercase event names like onclick
• Using hyphens in event names
• Incorrect capitalization like OnClick

3. Consider this React code snippet:

function MyButton() {
  function handleClick(event) {
    alert(event.type);
  }
  return <button onClick={handleClick}>Click me</button>;
}

What will be alerted when the button is clicked?

medium

A. undefined

B. click

C. onClick

D. Click

Solution

1. Step 1: Understand event.type in SyntheticEvent

   The event.type property contains the type of the event, which for a click event is the string "click" in lowercase.

2. Step 2: Analyze the alert output

   When the button is clicked, handleClick is called and alerts event.type, so it shows "click".

3. Final Answer:

   click -> Option B

4. Quick Check:

   event.type for click event = "click" [OK]

Hint: event.type is lowercase event name like 'click' [OK]

Common Mistakes:

• Assuming event.type is capitalized
• Confusing event handler name with event.type
• Expecting undefined if event not passed

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

function Form() {
  function handleSubmit(event) {
    event.preventdefault();
    console.log('Submitted');
  }
  return <form onSubmit={handleSubmit}><button type="submit">Send</button></form>;
}

medium

A. Missing return statement in handleSubmit

B. The event handler should be named onsubmit, not onSubmit

C. The button type should be button, not submit

D. event.preventdefault() should be event.preventDefault() with capital D

Solution

1. Step 1: Check event method spelling

   The method to stop form submission is event.preventDefault() with a capital D. The code uses lowercase 'd', which causes an error.

2. Step 2: Verify other parts

   The event handler should be named onsubmit, not onSubmit is wrong because React uses camelCase onSubmit. The button type should be button, not submit is incorrect because submit button type is correct. Missing return statement in handleSubmit is irrelevant since no return needed in handler.

3. Final Answer:

   event.preventdefault() should be event.preventDefault() with capital D -> Option D

4. Quick Check:

   Method names are case-sensitive: preventDefault() [OK]

Hint: JavaScript method names are case-sensitive [OK]

Common Mistakes:

• Using lowercase preventdefault() instead of preventDefault()
• Confusing onSubmit with onsubmit
• Changing button type unnecessarily

5. You want to handle a keyboard event in React and only respond when the Enter key is pressed. Which is the best way to do this using Synthetic events?

function Input() {
  function handleKeyDown(event) {
    // What condition should go here?
  }
  return <input onKeyDown={handleKeyDown} />;
}

hard

A. if (event.key === 'Enter') { /* handle Enter */ }

B. if (event.code === 13) { /* handle Enter */ }

C. if (event.keyCode === 13) { /* handle Enter */ }

D. if (event.keyName === 'Enter') { /* handle Enter */ }

Solution

1. Step 1: Understand SyntheticEvent keyboard properties

   React SyntheticEvent supports event.key which returns the key name as a string, e.g., 'Enter'. This is preferred over deprecated keyCode.

2. Step 2: Evaluate options

   if (event.key === 'Enter') { /* handle Enter */ } uses event.key === 'Enter' which is modern and recommended. if (event.keyCode === 13) { /* handle Enter */ } uses keyCode which is deprecated. Options A, B, and D use deprecated or invalid properties.

3. Final Answer:

   if (event.key === 'Enter') { /* handle Enter */ } -> Option A

4. Quick Check:

   Use event.key === 'Enter' for keyboard checks [OK]

Hint: Use event.key with string names, not keyCode [OK]

Common Mistakes:

• Using deprecated event.keyCode
• Using invalid event.code or event.keyName
• Comparing keyCode to string instead of number