Handling Click Events in React: A Beginner’s Guide to onClick

#react #beginners #frontend

Introduction

When we build a React application, users interact with it by clicking buttons, links, or other elements. These actions are called events.

In this blog, we will learn how to handle events in React using the onClick event. We will focus only on onClick so beginners can understand it clearly without confusion.

What Is Event Handling in React?

An event is an action done by the user, like clicking a button or typing in an input field.

Event handling means writing code that runs when that action happens.

React handles events in a way that is similar to JavaScript, but there are some small differences:

Event names use camelCase
We pass a function, not function call
React uses a synthetic event system for better performance

Example:

JavaScript: onclick
React: onClick

Basic onClick Example in React

Let’s start with a simple example.

function App() {
  function handleClick() {
    console.log("Button clicked");
  }

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

export default App;

What is happening here?

We created a function called handleClick
We passed that function to onClick
When the button is clicked, React runs the function

Important point:

We are not calling the function. We are only passing it.

Function Reference vs Arrow Function in onClick

You will often see two ways to use onClick.

1. Function Reference

<button onClick={handleClick}>Click</button>

This is best when:

No arguments are needed
Logic is simple

2. Arrow Function

<button onClick={() => handleClick()}>
  Click
</button>

This is useful when:

You want to pass arguments
You want to add extra logic

Both are correct. The choice depends on your use case.

Passing Arguments in onClick

Beginners often make this mistake:

<button onClick={handleClick(1)}>Click</button>

❌ This is wrong because the function runs immediately.

Correct way:

<button onClick={() => handleClick(1)}>
  Click
</button>

Now the function runs only when the button is clicked.

Common Beginner Mistakes

Here are some common mistakes beginners make:

Using onclick instead of onClick
Calling the function instead of passing it
Writing too much logic inside JSX
Expecting page reload like normal HTML
Forgetting that React events use camelCase

Avoiding these mistakes will save a lot of time.

Conclusion

Handling events is a core part of React. The onClick event helps us respond to user actions like button clicks.

Once you understand onClick, learning other events like onChange and onSubmit becomes much easier.

Start small, practice often, and build confidence step by step.