How to Handle onClick in React

What you’ll build or solve

You’ll run code when a user clicks a React element, like a button, link, or card.

When this approach works best

onClick works best when you need to:

• Trigger an action from a button, like saving, deleting, or opening a modal.
• Make a UI element interactive, like clicking a card to open details.
• Choose a value from the UI, like selecting a size, filter, or tab.

Avoid using click handlers for basic navigation when a normal link is enough. Also, avoid putting slow work directly in the handler if it will freeze the UI.

Prerequisites

• A React app set up
• Basic JSX knowledge

Step-by-step instructions

1) Attach a click handler to an element

React’s onClick expects a function. Pass a function reference so React can call it when the click happens.

exportdefaultfunctionButton() {
functionhandleClick() {
alert("Clicked!");
  }

return<buttononClick={handleClick}>Click</button>;
}

Inline handlers for short logic

Use an inline function when the action is short.

<buttononClick={() =>console.log("Clicked")}>
  Click
</button>

Pass arguments with a wrapper function

Wrap the call so it runs on click, not during render.

exportdefaultfunctionSizePicker() {
functionselectSize(size) {
console.log("Selected:",size);
  }

return (
<buttononClick={() =>selectSize("M")}>
      Medium
</button>
  );
}

What to look for:

• The event object is available if you need it:

  onClick={(e) => { /* ... */ }}

• preventDefault() stops default actions on links and form submits.

• stopPropagation() stops the click from bubbling to a parent handler.

• Don’t call the handler during render: onClick={handleClick()} runs immediately.

Examples you can copy

Example 1: Basic button action

exportdefaultfunctionSaveButton() {
functionsave() {
console.log("Saved");
  }

return<buttononClick={save}>Save</button>;
}

Example 2: Click a card, but ignore clicks on an inner button

exportdefaultfunctionCard() {
functionopenDetails() {
console.log("Open details");
  }

functionsave(e) {
e.stopPropagation();
console.log("Saved");
  }

return (
<div
onClick={openDetails}
style={{ border:"1px solid #ccc", padding:12 }}
>
<h3>Project</h3>
<p>Click anywhere to open.</p>
<buttononClick={save}>Save</button>
</div>
  );
}

stopPropagation() prevents the card’s click handler from running when the button is clicked.

Example 3: Prevent link navigation on click

exportdefaultfunctionLinkLikeAction() {
functionhandleClick(e) {
e.preventDefault();
console.log("Do something instead of navigating");
  }

return (
<ahref="/pricing"onClick={handleClick}>
      Pricing
</a>
  );
}

preventDefault() stops the browser from following the link.

Common mistakes and how to fix them

Mistake 1: Calling the handler during render

What you might do:

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

Why it breaks:

React runs handleClick() while rendering, so the click handler becomes whatever the function returned.

Fix: Pass a function reference or wrap the call.

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

<button onClick={() =>handleClick("M")}>
Medium
</button>

Mistake 2: Expecting stopPropagation() to block default navigation

What you might do:

functionhandleClick(e) {
e.stopPropagation();
}

Why it breaks:

stopPropagation() stops bubbling, but it does not stop a link’s default navigation.

Fix: Use preventDefault() for default actions.

functionhandleClick(e) {
e.preventDefault();
}

Troubleshooting

• If you see the handler fire on page load, check for onClick={fn()}. Use onClick={fn} or onClick={() => fn()}.
• If you see both a child and parent handler fire, the click is bubbling. Add e.stopPropagation() in the child handler when needed.
• If a link still navigates, you forgot e.preventDefault() or the handler is not attached to the link you clicked.
• If clicks do not fire, check for disabled on buttons or an overlay element blocking the click in DevTools.

Quick recap

• Add onClick={handler} to an element.
• Pass a function, not the result of calling a function.
• Wrap calls to pass arguments: onClick={() => fn(arg)}.
• Use preventDefault() to stop default actions, and stopPropagation() to stop bubbling.
• Check for onClick={fn()} when the handler runs too early.