Synthetic events in React - Mini Project: Build & Apply

Handling Synthetic Events in React

📖 Scenario: You are building a simple React app where users can click a button to see a message. React uses synthetic events to handle user interactions smoothly across browsers.

🎯 Goal: Create a React functional component with a button. When the button is clicked, show a message below it using React's synthetic event handling.

📋 What You'll Learn

Create a React functional component named ClickMessage

Add a button with the text Click me

Use React's onClick synthetic event to handle button clicks

Show the message You clicked the button! only after the button is clicked

💡 Why This Matters

🌍 Real World

Handling user clicks is a common task in web apps. React's synthetic events make it easy to write code that works the same in all browsers.

💼 Career

Understanding synthetic events and state updates is essential for React developers building interactive user interfaces.

1

Set up the React component and initial state

Create a React functional component called ClickMessage. Inside it, create a state variable called clicked using useState and set its initial value to false.

React

import React, { useState } from 'react';

function ClickMessage() {
  // Create a state variable called clicked with initial value false
  // Your code here
}

Hint

Use const [clicked, setClicked] = useState(false); inside the component.

2

Add the button with an onClick event handler

Inside the ClickMessage component, add a <button> element with the text Click me. Add an onClick attribute that calls a function to set clicked to true.

React

import React, { useState } from 'react';

function ClickMessage() {
  const [clicked, setClicked] = useState(false);
  // Add a button with onClick that sets clicked to true
  // Your code here
}

Hint

Use onClick={() => setClicked(true)} on the button element.

3

Display the message conditionally after click

Below the button, add a conditional rendering that shows the text You clicked the button! only if the state variable clicked is true.

React

import React, { useState } from 'react';

function ClickMessage() {
  const [clicked, setClicked] = useState(false);

  return (
    
       setClicked(true)}>Click me
      {/* Show message only if clicked is true */}
      {/* Your code here */}
    
  );
}

Hint

Use {clicked && <p>You clicked the button!</p>} to show the message conditionally.

4

Export the component as default

Add a default export statement for the ClickMessage component at the end of the file.

React

import React, { useState } from 'react';

function ClickMessage() {
  const [clicked, setClicked] = useState(false);

  return (
    
       setClicked(true)}>Click me
      {clicked && You clicked the button!}
    
  );
}

// Export the component as default
// Your code here

Hint

Use export default ClickMessage; at the end of the file.

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