React Events

In the last lesson on React Prop Drilling you saw how data moves through your components. This lesson is about events: how your app runs code when a user clicks, types, or submits something.

🤔 Why do we need events?

A page that only shows data is half an app. The other half is reacting to the user.

• Think about any app you use. WhatsApp, YouTube, Amazon. You tap, you type, you scroll.
• Every one of those actions is an event. A click, a keypress, a form submit.
• Your app has to listen for these actions and run some code when they happen.
• Without events, a button is just a picture. Nothing happens when you press it.

So events are the bridge between the user doing something and your code running. That is the whole point of this lesson.

🖱️ What is an event?

An event is just a thing the user does that the browser notices. React lets you run code in response.

• An event is a user action the browser detects, like a click, a key press, or a mouse move.
• Common ones you’ll use a lot: click, change (typing in a box), submit (sending a form), and hover.
• In React, you “listen” for an event by adding a special prop right on the JSX element.
• When the event happens, React calls the function you gave it. That function is called an event handler.

A simple way to picture it is a doorbell. The button is the element, pressing it is the event, and the bell ringing is your handler running.

🐫 React uses camelCase event props

If you’ve written plain HTML before, the names will look familiar but slightly different. React writes them in camelCase.

• In HTML you write onclick, all lowercase. In React you write onClick, with a capital C.
• Same idea for the rest: onChange, onSubmit, onMouseOver. The first word is lowercase, the next is capitalized.
• You put the event prop directly on the JSX element, just like any other prop.
• This is one of the small things React changes from HTML, so it’s worth getting used to early.

Here is a button that listens for a click. Notice the capital C in onClick.

function App() {
  return <button onClick={handleClick}>Click me</button>;
}

So onClick is the event prop. The value inside the curly braces is the handler React will call when the button is clicked.

🔧 Pass a function, not a string

This is the big difference from HTML, and it trips up a lot of people coming from plain HTML. In React you hand over a real function, not text.

• In HTML, onclick="doSomething()" is a string of code the browser reads and runs.
• In React, onClick={handleClick} is the actual function. You’re giving React the function itself.
• So the value goes inside curly braces, not quotes. Quotes would make it a plain text string, which React won’t run as code.

Here’s the HTML way versus the React way side by side.

// ❌ HTML style - a string of code (does not work in React)
<button onclick="handleClick()">Click me</button>

// ✅ React style - pass the real function inside curly braces
<button onClick={handleClick}>Click me</button>

So the React version points at a function. React holds onto it and calls it for you at the right moment.

⚠️ Pass the reference, don’t call it

Here’s the mistake almost everyone makes once. You add the parentheses out of habit, and your code runs at the wrong time.

• onClick={handleClick} passes the function reference. React calls it later, when the click happens.
• onClick={handleClick()} calls the function right away, while the page is rendering. That’s too early.
• The wrong version runs your code instantly and gives its return value to onClick, which is usually not what you want.
• The rule is simple: no parentheses when you just want React to call it on the event.

This shows the wrong way and the right way together.

// ❌ Wrong - the () calls it immediately during render
<button onClick={handleClick()}>Click me</button>

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

💡 A basic click example

Let’s put it all together in something that actually runs. A button that shows a message when you click it.

• We write a handler function called handleClick inside the component.
• We pass it to the button with onClick={handleClick}, no parentheses.
• When the user clicks, React calls handleClick, and the alert pops up.

Here is the full component. Read the handler first, then see where it gets wired up.

function GreetButton() {
  function handleClick() {
    alert("Hello, Riya!");
  }

  return <button onClick={handleClick}>Greet</button>;
}

So nothing happens until the click. The moment Riya presses the button, React runs handleClick and she sees the greeting.

🌐 React wraps events in a SyntheticEvent

When your handler runs, React passes it an event object, but it’s not the raw browser one. React gives you its own wrapper.

• React wraps the native browser event in something called a SyntheticEvent.
• It has the same API as the normal event. You still use event.target, event.preventDefault(), and so on.
• The reason is that different browsers used to behave slightly differently. The SyntheticEvent smooths that out so your code works the same everywhere.
• So you get one consistent, cross-browser event object without thinking about it.

Here a handler reads the event React hands it. We just log what was clicked.

function LogButton() {
  function handleClick(event) {
    console.log(event.type); // "click"
  }

  return <button onClick={handleClick}>Log the event</button>;
}

click

So event here is a SyntheticEvent: it behaves like a regular event, but React keeps it consistent across browsers for you.

🆚 HTML events vs React events

These two look almost the same, so let’s line up the differences that actually matter.

The main one is how you give the handler. HTML takes a string of code, while React takes a real function inside curly braces.

So if you remember one thing: React uses camelCase names and you pass a function, not text.

🧩 What You’ve Learned

• ✅ An event is a user action the browser notices, like a click, typing, or a form submit
• ✅ React listens for events with camelCase props like onClick, onChange, and onSubmit
• ✅ You pass a real function as the handler, not a string of code like in HTML
• ✅ Pass the function reference onClick={handleClick}, not a call onClick={handleClick()}
• ✅ onClick={handleClick()} runs the code too early, during render, instead of on the click
• ✅ React wraps the native event in a SyntheticEvent, so your code works the same in every browser

🚀 What’s Next?

Now you know how events work in React and how to wire up a handler. Next you’ll go deeper into the click event and do more useful things when a user presses a button.

React Click Events