Handling events in React - Mini Project: Build & Apply

Handling events in React

📖 Scenario: You are building a simple interactive button in a React app. When the user clicks the button, it should update a message on the screen.

🎯 Goal: Create a React functional component that shows a button and a message. When the button is clicked, the message changes from "Hello!" to "Button clicked!".

📋 What You'll Learn

Create a React functional component named ClickButton

Use useState to hold the message text

Add a button with an onClick event handler

Update the message state when the button is clicked

Render the message inside a <p> tag

💡 Why This Matters

🌍 Real World

Handling events like clicks is essential for interactive web apps. Buttons that respond to user actions are everywhere, from forms to games.

💼 Career

React developers must know how to handle events and update UI state to build responsive user interfaces.

1

Set up the initial message state

Create a React functional component called ClickButton. Inside it, use useState to create a state variable named message with the initial value "Hello!".

React

import React, { useState } from 'react';

function ClickButton() {
  // Create state variable 'message' with initial value 'Hello!'
  // Your code here
}

Hint

Remember to import useState from React and call it inside your component to create the message state.

2

Add a button with an onClick event handler

Inside the ClickButton component, add a <button> element. Add an onClick attribute to the button. For now, set the onClick value to an empty arrow function () => {}.

React

import React, { useState } from 'react';

function ClickButton() {
  const [message, setMessage] = useState("Hello!");

  // Add a button with onClick={() => {}}
  // Your code here
}

Hint

Wrap the button inside a return ( ... ) block and add the onClick attribute with an empty arrow function.

3

Update the message when the button is clicked

Change the onClick arrow function to call setMessage with the new string "Button clicked!" when the button is clicked.

React

import React, { useState } from 'react';

function ClickButton() {
  const [message, setMessage] = useState("Hello!");

  return (
     {
      // Update message state here
    }}>
      Click me
    
  );
}

Hint

Inside the arrow function, call setMessage("Button clicked!") to update the state.

4

Display the message below the button

Add a <p> tag below the button inside the return block. Inside the <p>, display the current message state variable.

React

import React, { useState } from 'react';

function ClickButton() {
  const [message, setMessage] = useState("Hello!");

  return (
    
       setMessage("Button clicked!") }>
        Click me
      
      {/* Add a  tag here to show the message */}
      // Your code here
    
  );
}

Hint

Use curly braces {} inside JSX to show the message variable.

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