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
}

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

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

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

Need a hint?

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