Events

Learn to pass a function to event attributes like onClick.

Events

In React, user interaction is caught by event handlers. You listen to a button click with the onClick prop: <button onClick={handleClick}>GO</button>.

The handler is a function starting with a lowercase letter. In braces you pass the function itself, not the call. So onClick={handleClick} is right, onClick={handleClick()} is wrong.

When the click happens, React calls the handler; you do whatever you want there.

Writing a handler

You define the handler inside the component: function handleClick() { ... }. With no parameter, it takes empty parens.

Each render recreates the handler; that is normal. Later we will see useCallback to optimize this.

Inside the handler you can do anything: compute data, call other functions, later update state.

Exercise Clickable button

Complete the skeleton. Write a ClickButton component; define a function handleClick inside (body can be empty). Return <button onClick={handleClick}>GO</button>. Export it.

Show example solution

function ClickButton() {
  function handleClick() {}
  return <button onClick={handleClick}>GO</button>;
}

export default ClickButton;

Test yourself

Which is correct?
```
If you add parens, the function runs at once.
```
- onClick="handleClick"
- onClick={handleClick()}
- onClick={handleClick}
- onClick=handleClick
Show answer

onClick={handleClick} — You pass the function itself, not the call.

Events: fill in the missing part

<button onClick={____}>GO</button>

Show answer

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

Events: match the terms

onClick

Click
onChange

Change
onSubmit

Form submit
onMouseOver

Hover

Next lesson: The event object

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies