Eventhandling in React Component

Let components report user intent through callbacks.

Read the explanation, run the worked example, then complete the matching Examples and Assignments tabs. Your original materials remain available alongside these notes.

Understand the idea

An event belongs to the rendered element but its handler can use component props and state. A row’s delete button should report its record ID rather than its current index. The parent can then update the owning collection even after sorting.

For event inspection, currentTarget is the element whose handler is running and target may be a nested child. Read the input value synchronously before asynchronous work. Use onSubmit for forms so keyboard submission and button submission follow the same path.

User input ↓ Event handler ↓ State update ↓ Render updated UI

Run the example

Use a separate React practice project with a Node.js version supported by Vite. Create it once with these commands, then use its development URL. Do not paste this into the Edupoly website’s own source files.

npm create vite@latest react-practice -- --template react
cd react-practice
npm install
npm run dev

Replace src/App.jsx with the following complete example. Keep Vite’s generated src/main.jsx entry point.

src/App.jsx

import { useState } from 'react';
function TodoRow({todo, onDelete}) {
  return <li>{todo.text} <button onClick={() => onDelete(todo.id)}>Delete</button></li>;
}
export default function App() {
  const [todos, setTodos] = useState([{id: 1, text: 'Read JSX'}, {id: 2, text: 'Practice events'}]);
  return <ul>{todos.map(todo => <TodoRow key={todo.id} todo={todo} onDelete={id => setTodos(items => items.filter(item => item.id !== id))} />)}</ul>;
}

Apply this to your assignments

Use your event-object and console examples first. Then implement textbox, radio and checkbox inputs, followed by the counter and todo deletion tasks. Verify deletion after sorting.

Your existing examples

• Bind event handler to alert something on button click in React Component
• Console something on button click in React Component
• Console event object on button click in React Component

Open the Examples tab to run or inspect these supplied projects. Their original links are preserved.

Open Assignments for your complete original worksheet. Use the assignment workspace link to submit completed work.

Common mistakes

Do not pass an index when the operation means a record ID. Avoid calling a callback while rendering.

Check your understanding

1. Predict the output before running the example, then compare it with the result panel.
2. Explain which value each expression reads and which action changes it.
3. Try the boundary cases listed in the practice task and record what you observe.
4. Rebuild one matching assignment without copying, then compare behavior with the original example.

Reference

Official documentation for this topic · Vite setup requirements