small fix

Author: bradwestfall

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "start": "vite-node scripts/start.ts",
+    "dev": "npm start",
     "kill-db-port": "node scripts/kill-db-port 3333",
     "install-remix": "cd remix && npm install",
     "test": "jest"

react/core/02-state/lecture/GroceryForm.tsx

@@ -13,8 +13,8 @@ export function GroceryForm({ onSubmit }: Props) {
   // Teach refs with typescript
 
   function handleSubmit(event) {
-    // Typescript has no idea what "event" is
-    //
+    // Typescript has no idea what "event" is, so use "currentEvent"
+
     // Three basic ways to get our form's fields
     // 1. new FormData
     // 2. Scrape for it: ids (bad) refs (good)
@@ -27,11 +27,11 @@ export function GroceryForm({ onSubmit }: Props) {
     <form onSubmit={handleSubmit} className="space-y-3">
       <div>
         <label htmlFor="item">Item</label>
-        <input id="item" type="text" className="form-field" autoComplete="off" />
+        <input id="itemName" type="text" className="form-field" autoComplete="off" name="name" />
       </div>
       <div>
         <label htmlFor="quantity">Quantity</label>
-        <input id="quantity" type="text" className="form-field" />
+        <input id="itemQuantity" type="text" className="form-field" name="quantity" />
       </div>
       <footer>
         <button type="submit" className="button">

react/core/02-state/lecture/GroceryList.tsx

@@ -23,7 +23,7 @@ export function GroceryList({ items, subtractQuantity, addQuantity }: Props) {
     <>
       <div className="space-y-3">
         {/* Map over items */}
-        <div className="flex gap-6 bg-slate-100 p-4">
+        <div className="flex gap-6 items-center bg-slate-100 p-4">
           <div className="flex-1">Eggs</div>
           <div className="flex-1">Quantity: 12</div>
           <div className="flex-1 flex gap-2">