JSX eventhandling

Connect browser events to state changes.

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 prop receives a function. onClick={save} passes that function; onClick={save()} calls it during rendering. Use an arrow function when passing a record ID. Read input values from event.currentTarget and store values needed by the screen in state.

Your uppercase, keyup and blur exercises differ in when they commit a value. onChange updates on typing; onBlur commits when focus leaves; a button can copy a draft into displayed state. Text inputs produce strings, so convert before arithmetic. Radio buttons represent one value; checkboxes represent independent booleans or a selected set.

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';
export default function App() {
  const [draft, setDraft] = useState('');
  const [name, setName] = useState('');
  return <main>
    <label>Name <input value={draft} onChange={e => setDraft(e.currentTarget.value)} /></label>
    <button onClick={() => setName(draft.toUpperCase())}>Show uppercase</button>
    <button onClick={() => {setDraft(''); setName('');}}>Reset</button>
    <h1>{name || 'Enter a name'}</h1>
  </main>;
}

Apply this to your assignments

Extend this to your arithmetic buttons using Number(value), and guard division by zero. Build select/day and radio-image examples. Continue with the state lesson for likes, rating and todo operations.

Your existing examples

• Bind event handler to alert something on button click in jsx
• Console text box value on button click
• Display text box value in h1 on button click
• Display text box value in h1 on textbox keyup event
• Display addition of two text box values in h1 on textbox on button click
• Display radio button value on check
• Display respective image on radio button value
• Console something on button click
• Display selected checkbox values in console
• Bindevent handler with arguments
• Bindevent handler with arguments as index for list item genereted from array
• Bindevent handler with arguments as values for list item genereted from array
• Display values in h1
• Display incremented value variable value in h1 on a button click
• Implement counter application
• Push text box value to an array display in h1
• Todolist with delete button
• Console event object on button click

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

Changing a plain local variable does not request a React render. Inside a form, give non-submit buttons type="button".

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