Events & forms.
The controlled component pattern.

// Basic onClick — pass the function
Click

// ❌ WRONG — this CALLS handleClick on every render
handleClick()}>Click

// ✅ CORRECT — pass a reference
function handleClick() {
console.log('clicked!');
}

// Inline arrow function — when you need to pass arguments
 handleDelete(item.id)}>Delete

// The event object — always the first argument
function handleChange(event) {
console.log(event.target.value); // current input value
console.log(event.target.name); // input's name attribute
}

// Common events:
// onClick — click
// onChange — input/select/textarea value changes
// onSubmit — form submitted
// onFocus — input focused
// onBlur — input loses focus
// onKeyDown — key pressed
// onMouseEnter — mouse enters element

// React 17+ — event objects are NOT pooled (no need for event.persist)
async function handleAsync(event) {
await someAsyncOperation();
console.log(event.target.value); // works — not null
}

import { useState } from 'react';

function NameForm() {
const [name, setName] = useState('');

return (

"name">Name:
"name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
You typed: {name}

);
}

// What happens on every keystroke:
// 1. User types "A"
// 2. onChange fires with e.target.value = "A"
// 3. setName("A") schedules a re-render
// 4. Component re-renders — name is now "A"
// 5. Input's value prop is "A" — matches what user typed
//
// The input ALWAYS displays what state says.
// If you forget onChange, the input becomes read-only
// (because value is stuck at the last state value).

function ContactForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [submitted, setSubmitted] = useState(false);

function handleSubmit(event) {
event.preventDefault(); // ← REQUIRED

// Handle the data — send to server, save, validate, etc.
console.log({ name, email });
setSubmitted(true);

// Reset the form
setName('');
setEmail('');
}

if (submitted) {
return 
Thanks! We'll be in touch.
;
}

return (

"text"
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
"email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
"submit">Send

);
}

function SignupForm() {
const [form, setForm] = useState({
name: '',
email: '',
password: '',
});

// One handler works for all inputs
function handleChange(event) {
const { name, value } = event.target;
setForm(prev => ({ ...prev, [name]: value }));
}

function handleSubmit(event) {
event.preventDefault();
console.log(form);
// { name: 'Alice', email: 'a@b.com', password: '...' }
}

return (

"name"
value={form.name}
onChange={handleChange}
placeholder="Name"
/>
"email"
value={form.email}
onChange={handleChange}
placeholder="Email"
/>
"password"
type="password"
value={form.password}
onChange={handleChange}
placeholder="Password"
/>
"submit">Sign Up

);
}

function SignupForm() {
const [form, setForm] = useState({ email: '', password: '' });
const [errors, setErrors] = useState({});

function validate(data) {
const errs = {};

if (!data.email.includes('@')) {
errs.email = 'Email must contain @';
}

if (data.password.length < 8) {
errs.password = 'Password must be at least 8 characters';
}

return errs;
}

function handleSubmit(event) {
event.preventDefault();

const errs = validate(form);
if (Object.keys(errs).length > 0) {
setErrors(errs);
return; // stop submit
}

// Now submit to server (which ALSO validates)
console.log('Valid! Sending to server:', form);
}

return (

"email"
value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })}
/>
{errors.email && 
'red' }}>{errors.email}
}

"password"
type="password"
value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })}
/>
{errors.password && 
'red' }}>{errors.password}
}

"submit">Sign Up

);
}