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
}

Need a 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
}

Need a 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
    
  );
}

Need a 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
    
  );
}

Need a hint?

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