Event Handling

Learning objectives#

• Attach handlers with onClick, onChange and onSubmit
• Pass arguments to handlers correctly
• Use the event object and preventDefault
• Name and pass handlers between components

Explanation#

Events use camelCase props with a function: <button onClick={handleClick}>. Pass the function itself — do not call it.

To pass arguments, wrap in an arrow: onClick={() => remove(item.id)}.

The handler receives a synthetic event with the familiar API: e.target.value, e.preventDefault(), e.stopPropagation(), e.key for keyboard events.

Forms: handle onSubmit on the <form> and call e.preventDefault() so the page does not reload.

Conventions: handler functions are named handleSomething; props that accept handlers are named onSomething (onSave={handleSave}).

Syntax#

1<button onClick={handleSave}>Save</button>
2<button onClick={() => remove(id)}>Delete</button>
3<input onChange={e => setName(e.target.value)} />
4<form onSubmit={e => { e.preventDefault(); send(); }}>

Code example: Clicks, keys and a form#

1import { useState } from 'react';
2

3export default function Events() {
4  const [log, setLog] = useState([]);
5  const [name, setName] = useState('');
6  const add = message => setLog(prev => [message, ...prev].slice(0, 5));
7

8  function handleSubmit(e) {
9    e.preventDefault();                       // no page reload
10    add(`Submitted: ${name || '(empty)'}`);
11    setName('');
12  }
13

14  function handleKeyDown(e) {
15    if (e.key === 'Escape') {
16      setName('');
17      add('Cleared with Escape');
18    }
19  }
20

21  return (
22    <>
23      {['Pen', 'Notebook'].map(item => (
24        <button key={item} onClick={() => add(`Clicked ${item}`)}>{item}</button>
25      ))}
26

27      <form onSubmit={handleSubmit}>
28        <input
29          value={name}
30          onChange={e => setName(e.target.value)}
31          onKeyDown={handleKeyDown}
32          aria-label="Your name"
33        />
34        <button type="submit">Send</button>
35      </form>
36

37      <ol>{log.map((line, i) => <li key={i}>{line}</li>)}</ol>
38    </>
39  );
40}

Clicking “Pen” adds “Clicked Pen” to the log. Typing a name and pressing Enter or Send adds “Submitted: Asha” without reloading the page. Pressing Escape in the input clears it and logs “Cleared with Escape”. The log keeps the latest five lines.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. Each item button uses an arrow function to pass its own name to add.
2. onChange keeps the input in sync with the name state.
3. onKeyDown checks e.key to react to Escape.
4. handleSubmit runs for both Enter and the Send button and prevents the page reload.

Real-world use case#

Common mistakes#

Best practices#

• Name handlers handleX and props onX
• Use buttons for actions
• Handle forms with onSubmit
• Keep handlers short; move logic into functions

Remember this#

Practice exercise#

1import { useState } from 'react';
2

3export default function LikeButton() {
4  const [liked, setLiked] = useState(false);
5  return (
6    <button onClick={() => setLiked(l => !l)} aria-pressed={liked}>
7      {liked ? '♥ Liked' : '♡ Like'}
8    </button>
9  );
10}

Mini quiz#

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

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.