React onClick Event Handling for Beginners (Examples)

How do you handle a click in React? You add an onClick attribute to an element and give it a function. When the user clicks the element, React runs that function. That is all an event handler is: a function that runs when something happens on the page.

In this beginner guide you will learn what an event is, how to write onClick handlers, how to pass values to them, and how to change what the user sees after a click. No prior React knowledge beyond the basics is needed. Every new word is explained when it first appears.

What is an event in React?

An event is something that happens in the browser. A user clicks a button, types in a box, or moves the mouse. Your code can listen for these events and respond to them.

An event handler is the function that responds. In React you attach a handler to an element with a special attribute. The most common one is onClick, which listens for mouse clicks and taps on a touch screen.

Notice the names use camelCase. That means the first word is lowercase and each next word starts with a capital letter, like onClick. In plain HTML you would write onclick in lowercase. In React it must be onClick.

Your first onClick handler

Here is the smallest working example. It shows an alert when you click a button.

function HelloButton() {
  function handleClick() {
    alert('Hello from React!');
  }

  return <button onClick={handleClick}>Say hello</button>;
}

export default HelloButton;

Line by line: line 1 creates a component named HelloButton. A component is a reusable piece of the page written as a function. Lines 2 to 4 define handleClick, the function that should run on click. Line 6 returns a button. The curly braces in onClick={handleClick} tell React that what is inside is JavaScript, not plain text. We give React the function itself, and React calls it later when the click happens.

The most common mistake: calling the function

Beginners often write onClick={handleClick()} with parentheses. This runs the function immediately while the page is drawing, not when the user clicks. Compare the two versions.

// Wrong: runs right away when the page loads
<button onClick={handleClick()}>Say hello</button>

// Right: runs only when the button is clicked
<button onClick={handleClick}>Say hello</button>

The first button calls handleClick during rendering and passes its result to onClick. The second passes the function itself, so React can call it at the right moment. Remember: no parentheses when you pass the handler by name.

Writing the handler inline with an arrow function

For short actions you can write the function directly inside onClick. An arrow function is a short way to write a function using =>.

function InlineExample() {
  return (
    <button onClick={() => alert('You clicked me!')}>
      Click me
    </button>
  );
}

The part () => alert('You clicked me!') is a tiny function with no name. It does nothing until the click happens. Use inline functions for one-line actions. If the logic grows, move it into a named function like handleClick so the code stays easy to read.

Changing the page after a click with state

Showing an alert is fine for learning, but real apps usually change what is on the screen. For that you need state, which is data a component remembers between renders. If state is new to you, read our guide to the useState hook first. Here is a counter.

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

Line 4 creates a state value called count that starts at 0, plus a function setCount to change it. Inside handleClick, setCount(count + 1) asks React to store a new number. React then draws the component again, and the paragraph shows the new count. You never edit the page by hand. You change the state, and React updates the screen.

Passing a value to an onClick handler

Sometimes the handler needs to know which item was clicked. You cannot write onClick={handleDelete(5)} because that calls the function right away. Wrap the call in an arrow function instead.

import { useState } from 'react';

function FruitList() {
  const [fruits, setFruits] = useState(['Apple', 'Banana', 'Cherry']);

  function removeFruit(name) {
    setFruits(fruits.filter((fruit) => fruit !== name));
  }

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>
          {fruit}
          <button onClick={() => removeFruit(fruit)}>Remove</button>
        </li>
      ))}
    </ul>
  );
}

The state holds a list of fruit names. removeFruit receives a name and keeps every fruit except that one, using filter. In the list, each button has onClick={() => removeFruit(fruit)}. The arrow function waits for the click, then calls removeFruit with that row's fruit. The key attribute helps React track each list item.

The event object

React gives every handler an event object. It holds details about what happened, such as which element was clicked. By convention it is named e or event.

function LinkExample() {
  function handleClick(e) {
    e.preventDefault();
    console.log('Clicked element:', e.target.tagName);
  }

  return <a href="https://example.com" onClick={handleClick}>Visit</a>;
}

React passes e to handleClick automatically. e.preventDefault() stops the browser's normal behavior, which here is following the link. e.target is the element that was clicked, and tagName is its HTML name, such as A or BUTTON. You will use preventDefault often with forms and links.

Quick rules to remember

• Write the attribute as onClick, in camelCase.
• Pass a function, not a function call: onClick={handleClick}, not onClick={handleClick()}.
• Use an arrow function when you need to pass a value: onClick={() => remove(id)}.
• Change state inside the handler so React updates the screen.
• Use e.preventDefault() to stop default browser actions like following a link.