// Lesson 08 — Forms in React import { useState } from 'react' // TODO 1: Controlled form — all input types function OrderForm() { const [form, setForm] = useState({ name: '', email: '', size: 'medium', shots: '1', milk: false, notes: '', }) const [errors, setErrors] = useState({}) const [submitted, setSubmitted] = useState(null) // TODO: One handleChange for ALL field types // Hint: use e.target.name, e.target.value, e.target.type, e.target.checked const handleChange = (e) => { const { name, value, type, checked } = e.target setForm(prev => ({ ...prev, [name]: ???, // use checked for checkboxes, value for everything else })) } // TODO: Validate — return errors object const validate = () => { const errs = {} if (!form.name.trim()) errs.name = 'Name is required' if (!form.email.includes('@')) errs.email = 'Enter a valid email' return errs } // TODO: Handle submit const handleSubmit = (e) => { ??? // stop page reload const errs = validate() if (Object.keys(errs).length > 0) { setErrors(errs) return } setSubmitted(form) } if (submitted) { return (

Order placed! ☕

{JSON.stringify(submitted, null, 2)}

) } return (