React Event Handling onClick, onChange, onSubmit

What Is Event Handling?

Event handling in React means responding to user actions such as clicking a button, typing into an input, submitting a form, or pressing a key. React events look similar to HTML events, but they are written in JSX and usually connect to JavaScript functions defined inside the component.

HTML vs React Event Syntax

React uses camelCase event names such as onClick, onChange, and onSubmit. Instead of passing a string like in HTML, you pass a function reference.

HTML vs React Event Syntax - JSX Example

<!-- HTML -->
<button onclick="showMessage()">Click</button>

// React
<button onClick={showMessage}>Click</button>

Click Events

Click Events - JSX Example

function App() {
    function handleClick() {
        alert('Button clicked')
    }

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

Passing Arguments to Event Handlers

If a handler needs additional data, wrap the call in an arrow function.

Passing Arguments to Event Handlers - JSX Example

function App() {
    function handleDelete(id) {
        console.log('Delete item:', id)
    }

    return <button onClick={() => handleDelete(5)}>Delete</button>
}

Input and Change Events

The onChange event is commonly used with controlled inputs. React stores the current value in state and updates it every time the user types.

Input and Change Events - JSX Example

import { useState } from 'react'

function SearchBox() {
    const [query, setQuery] = useState('')

    return (
        <input
            value={query}
            onChange={(event) => setQuery(event.target.value)}
            placeholder="Search..."
        />
    )
}

Form Submit Event

Forms in React usually handle submission with onSubmit. The handler often uses event.preventDefault() so the page does not reload.

Form Submit Event - JSX Example

function LoginForm() {
    function handleSubmit(event) {
        event.preventDefault()
        console.log('Form submitted')
    }

    return (
        <form onSubmit={handleSubmit}>
            <button type="submit">Login</button>
        </form>
    )
}

Keyboard Events

Keyboard Events - JSX Example

function SearchInput() {
    function handleKeyDown(event) {
        if (event.key === 'Enter') {
            console.log('Search now')
        }
    }

    return <input onKeyDown={handleKeyDown} placeholder="Press Enter" />
}

The Event Object

React passes an event object to handlers. It gives access to useful information such as the target element, typed value, key pressed, mouse position, and helper methods like preventDefault().

Common Real-World Patterns

Button clicks for opening modals, deleting rows, and triggering actions
Input change events for search fields and controlled forms
Submit handlers for login, registration, and checkout forms
Keyboard events for shortcuts and Enter-to-submit behavior

Event Handler Failure Cases

Mistake	Why it is wrong	Better approach
Calling the handler immediately in JSX	The function runs during render instead of on the event	Pass a function reference or arrow function
Forgetting preventDefault() on forms	The browser reloads the page	Call event.preventDefault() in submit handlers
Writing too much logic inline	JSX becomes harder to read	Move larger logic into named handler functions
Ignoring the event object when needed	Loses access to user input or key details	Use the event parameter when the handler depends on user input

Best Practices

Use descriptive handler names such as handleSubmit and handleDelete
Keep simple handlers inline only when they remain easy to read
Move bigger event logic into named functions
Use controlled inputs for form-heavy components
Use the event object deliberately instead of ignoring it by habit

Summary

Event handling is how React components respond to user interaction. Whether the user clicks, types, submits, or presses a key, React connects those actions to JavaScript functions inside your components. Once you understand event handlers well, building interactive React UIs becomes much more natural.

Before you move on