React Click Events

In the last lesson you learned about React Events. This lesson zooms into the one you’ll use most, the click, and shows how onClick wires a button to your code.

🤔 Why do we need onClick?

Here’s the pain. A button on the screen does nothing on its own.

• You add a <button> so the user can do an action.
• The user clicks it. Nothing happens. No counter goes up, no menu opens.
• You need a way to say “when this button is clicked, run this code”.
• That connection between the click and your code is exactly what onClick gives you.

So onClick is the bridge. It links a user’s click to a function you wrote.

🧩 What is onClick?

onClick is a prop you put on a JSX element that tells React which function to run when that element is clicked.

• It’s written in camelCase: onClick, not onclick. React is picky about that.
• You give it a function. When the click happens, React calls that function for you.
• The function you give it is called an event handler, because it “handles” the click event.

This is the smallest possible version. We give onClick a function that shows a message.

function App() {
  return <button onClick={() => alert("Clicked!")}>Click me</button>;
}

When you click the button, React runs the function inside onClick, and the alert pops up. That’s the whole idea in one line.

🛠️ Defining the handler function

For anything real, you don’t cram the code into onClick. You write a separate function and point onClick at it. We call this the handler function.

• Define the function inside the component, above the return.
• Name it clearly, like handleClick. The handle prefix is the common convention.
• Then pass that function’s name to onClick.

Here we pull the click logic out into its own handleClick function and hand it to the button.

function App() {
  function handleClick() {
    alert("Button was clicked!");
  }

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

So now handleClick lives on its own. The button just says “when clicked, run handleClick”. Cleaner, and easier to grow later.

📝 Three ways to write the handler

There are a few ways you’ll see handlers written, and it helps to know all three.

• Named function, passed by reference. You write onClick={handleClick}. No parentheses. This is the most common and the cleanest.
• Inline arrow function. You write onClick={() => doSomething()}. Good for a quick, tiny action right there.
• Calling it with parentheses. You write onClick={handleClick()}. This one is wrong, and we’ll see why in the next section.

This example shows the two correct styles side by side. Both work fine.

function App() {
  function handleClick() {
    alert("Clicked!");
  }

  return (
    <div>
      {/* ✅ Named function, passed by reference */}
      <button onClick={handleClick}>Style one</button>

      {/* ✅ Inline arrow function */}
      <button onClick={() => alert("Clicked!")}>Style two</button>
    </div>
  );
}

Use the named function when the logic is more than a line or two. Use the inline arrow when it’s a tiny one-off. Same result either way.

🚫 Don’t call the handler with parentheses

This is the mistake almost everyone makes once, so let’s be very clear about it. You pass the function. You do not call it.

// ❌ Wrong - the parentheses CALL handleClick right away, during render
<button onClick={handleClick()}>Click me</button>

// ✅ Right - you pass the function, React calls it later on the click
<button onClick={handleClick}>Click me</button>

The difference is who runs the function and when.

• onClick={handleClick} hands React the function. React keeps it and runs it only when the user actually clicks.
• onClick={handleClick()} runs handleClick immediately, while the page is still drawing. Then it gives onClick whatever the function returned, which is usually nothing.
• So with the parentheses, your code fires at the wrong time and the click does nothing later.

🔢 Updating state on a click

Now the part that makes clicks useful. Most of the time a click should change something on screen, and you do that by calling a state setter inside the handler. Let’s build a counter with useState.

• useState(0) gives you count and setCount, starting at 0.
• The handler calls setCount(count + 1) to bump the number up.
• setCount updates the value and tells React to re-draw, so the new count shows.

Here’s a full working counter. Each click adds one and the screen updates by itself.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Add one</button>
    </div>
  );
}

So the chain is simple. Click runs handleClick, handleClick calls setCount, React re-renders, and {count} shows the new number. That’s a real, working button.

🌍 onClick works on any element

One thing that surprises people: onClick is not just for buttons. You can put it on almost any element you want a user to click.

• A <div>, a <span>, an <img>, an <li>, a <p> — all of them accept onClick.
• React runs your handler the same way no matter which element it sits on.
• A <button> is still the best choice for real actions, because it works with the keyboard and screen readers by default.

Here the same handler is attached to a <div> and an <img>, not a button.

function Gallery() {
  function handleClick() {
    alert("You clicked the image!");
  }

  return (
    <div onClick={handleClick}>
      <img src="/photo.jpg" alt="A photo" onClick={handleClick} />
      <p>Click the box or the photo</p>
    </div>
  );
}

So onClick is flexible. Just remember to use a real <button> for actual buttons, so people using a keyboard can reach it too.

🧩 What You’ve Learned

• ✅ onClick connects a user’s click to a function you write
• ✅ It’s camelCase (onClick), and the function you give it is called an event handler
• ✅ Define the handler inside the component, usually named like handleClick
• ✅ Pass it by reference (onClick={handleClick}) or as an inline arrow (onClick={() => ...})
• ✅ Never write onClick={handleClick()} — the parentheses run it immediately, at the wrong time
• ✅ To change the screen on a click, call a state setter like setCount inside the handler
• ✅ onClick works on any element, not just buttons, but a real <button> is best for actions

🚀 What’s Next?

Now you can run a function on any click and update state with it. But what if your handler needs extra information, like which item was clicked? Next you’ll learn how to send your own arguments into an event handler.

React Passing Arguments to Event Handlers