Demon Tech Roadmap

React

React Event Handling

React handles user clicks, typing, and hovering securely.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

React handles events very similarly to standard HTML, but with a few syntax changes. Event names are written in camelCase, and developers pass actual JavaScript functions inside curly braces instead of passing string names.

Example

1/* this handles a click event */
2function SubmitButton() {
3  function handleClick(event) {
4    event.preventDefault();
5    console.log("Form submitted!");
6  }
7  return <button onClick={handleClick}>Submit</button>;
8}

Key Points

Use camelCase for events (e.g., `onClick`, `onChange`).
Pass the function directly: `onClick={handleClick}`.
Do not add parentheses `()` when passing the function.
React automatically passes the `event` object to the function.

Up Next

Continue your journey with the next topic.

Go to React Conditional Rendering ❯