\n setName(event.target.value)}\n placeholder=\"Enter your name\"\n />\n\n

Hello, {name}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"sjrswztg1\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function NameInput() {\\n const [name, setName] = useState(\\\"\\\")\\n\\n return (\\n

\\n setName(event.target.value)}\\n placeholder=\\\"Enter your name\\\"\\n />\\n\\n

Hello, {name}

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ed0cf1e7-ccf1-4006-9975-a7f1a10a8eae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"94e2cebb-7498-45c7-842e-7279be389087","type":"procode","props":{"code":"Text input uses value and onChange.\n","language":"txt","filename":"","files":"[{\"id\":\"c767h8p4r\",\"name\":\"code\",\"code\":\"Text input uses value and onChange.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b5be1934-0f11-4691-9300-857ba56bfe65","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For text inputs, React controls the text with the ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":" prop, and ","styles":{}},{"type":"text","text":"onChange","styles":{"code":true}},{"type":"text","text":" fires when the user changes the input value.","styles":{}}],"children":[]},{"id":"cff968f5-357b-4b67-b940-4df504c48cc4","type":"divider","props":{},"children":[]},{"id":"5048e22a-888b-48e9-8b02-316d4cd0f5ed","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Password Input","styles":{}}],"children":[]},{"id":"6d824e18-7827-4bf3-893c-aa6ca0f6f5f8","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function PasswordInput() {\n const [password, setPassword] = useState(\"\")\n\n return (\n

\n setPassword(event.target.value)}\n placeholder=\"Enter password\"\n />\n\n

Password length: {password.length}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"vlj7fn8nh\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function PasswordInput() {\\n const [password, setPassword] = useState(\\\"\\\")\\n\\n return (\\n

\\n setPassword(event.target.value)}\\n placeholder=\\\"Enter password\\\"\\n />\\n\\n

Password length: {password.length}

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6f0dce7c-df8d-49aa-843a-bbba1d8169d4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"ce2a0d3a-96f0-4cfe-8825-4890e512fe81","type":"procode","props":{"code":"Password input is controlled the same way as text input.\n","language":"txt","filename":"","files":"[{\"id\":\"e69c14pb9\",\"name\":\"code\",\"code\":\"Password input is controlled the same way as text input.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"212800f0-fa5f-4bab-9317-24f0abc897da","type":"divider","props":{},"children":[]},{"id":"6de6950d-6231-4eb2-8402-f82275ce1928","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Number Input","styles":{}}],"children":[]},{"id":"67100671-3606-47e2-9607-7d1d15fb9946","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Even with ","styles":{}},{"type":"text","text":"type=\"number\"","styles":{"code":true}},{"type":"text","text":", input value from the browser is usually read as a string.","styles":{}}],"children":[]},{"id":"64ed0fa7-21e0-4948-8074-a976bae75dca","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function QuantityInput() {\n const [quantity, setQuantity] = useState(1)\n\n return (\n

\n \n setQuantity(Number(event.target.value))\n }\n />\n\n

Quantity: {quantity}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"ak7ufibtq\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function QuantityInput() {\\n const [quantity, setQuantity] = useState(1)\\n\\n return (\\n

\\n \\n setQuantity(Number(event.target.value))\\n }\\n />\\n\\n

Quantity: {quantity}

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"85b1f590-ec0c-4870-b165-f9b2acd9ada6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"37876ce8-b4f1-4314-ae94-74ce04a999da","type":"procode","props":{"code":"Number input often needs Number(event.target.value).\n","language":"txt","filename":"","files":"[{\"id\":\"cmjl5qnjk\",\"name\":\"code\",\"code\":\"Number input often needs Number(event.target.value).\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2159a572-c21d-47a9-9c16-e7b9b080eccd","type":"divider","props":{},"children":[]},{"id":"e19aed77-1f33-4ad3-b036-72cd030ee693","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Textarea","styles":{}}],"children":[]},{"id":"7ab8a76d-93ed-4747-ba5e-5b39466bf04c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Controlled textarea uses ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"onChange","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"7bdc3501-6bb3-4197-afd3-ffcedd97a0ce","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function MessageForm() {\n const [message, setMessage] = useState(\"\")\n\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"eytbxfodh\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function MessageForm() {\\n const [message, setMessage] = useState(\\\"\\\")\\n\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"14a48f35-6c11-454e-890c-2de31065b90a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"6e210d45-07c7-48d8-90ef-49e03753fcf6","type":"procode","props":{"code":"Textarea is controlled with value and onChange.\n","language":"txt","filename":"","files":"[{\"id\":\"03ghptm1m\",\"name\":\"code\",\"code\":\"Textarea is controlled with value and onChange.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"27508d43-b21d-4ccf-828e-04020d335a0f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React’s textarea reference explains that a textarea can be controlled by passing a string ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":", and when ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":" is passed, an ","styles":{}},{"type":"text","text":"onChange","styles":{"code":true}},{"type":"text","text":" handler is required to update it.","styles":{}}],"children":[]},{"id":"4e770f87-8e5e-49e5-ab7f-58420d4bdc6a","type":"divider","props":{},"children":[]},{"id":"98f7ed08-8853-405b-b381-6540e8b9b20b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Select Option","styles":{}}],"children":[]},{"id":"9b8553d0-ba8a-40c6-b2b4-9a0b8267c8d7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Controlled select also uses ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"onChange","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"4b454cfe-7943-4482-bc3c-16cd43e7e828","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function CategorySelect() {\n const [category, setCategory] = useState(\"react\")\n\n return (\n

\n setCategory(event.target.value)}\n >\n \n \n \n \n\n

Selected category: {category}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"7npk36aam\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function CategorySelect() {\\n const [category, setCategory] = useState(\\\"react\\\")\\n\\n return (\\n

\\n setCategory(event.target.value)}\\n >\\n \\n \\n \\n \\n\\n

Selected category: {category}

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"338fea33-b5b1-42f0-aed8-1f8b12697160","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"34113e10-015d-4500-aa60-753e73f5aafd","type":"procode","props":{"code":"Select value comes from state.\nChanging option updates state.\n","language":"txt","filename":"","files":"[{\"id\":\"uauli3yrf\",\"name\":\"code\",\"code\":\"Select value comes from state.\\nChanging option updates state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bcf18f56-aee6-435b-baac-ea942838f595","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React’s select reference explains that a select box can be controlled by passing a ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":" prop and an ","styles":{}},{"type":"text","text":"onChange","styles":{"code":true}},{"type":"text","text":" handler.","styles":{}}],"children":[]},{"id":"b0c1dd55-e187-4365-a23e-d07c956ffc43","type":"divider","props":{},"children":[]},{"id":"97c9c55d-3eb1-4f19-b702-9d09e04fae99","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Checkbox","styles":{}}],"children":[]},{"id":"0e195fe7-7cc2-49b0-88a2-6701f59c0a03","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Checkbox uses ","styles":{}},{"type":"text","text":"checked","styles":{"code":true}},{"type":"text","text":", not ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"f2c18846-6d93-4634-ae9a-a61577a1d1ae","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function TermsCheckbox() {\n const [accepted, setAccepted] = useState(false)\n\n return (\n \n setAccepted(event.target.checked)}\n />\n I accept the terms\n\n

Accepted: {accepted ? \"Yes\" : \"No\"}

\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"ilhjohw6v\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function TermsCheckbox() {\\n const [accepted, setAccepted] = useState(false)\\n\\n return (\\n \\n setAccepted(event.target.checked)}\\n />\\n I accept the terms\\n\\n

Accepted: {accepted ? \\\"Yes\\\" : \\\"No\\\"}

\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f5dd707d-2268-45f6-9b04-7e720726aba9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"79516595-b1f3-4537-8bab-d829306df71a","type":"procode","props":{"code":"Text input → value\nCheckbox → checked\n","language":"txt","filename":"","files":"[{\"id\":\"cyt87pt7y\",\"name\":\"code\",\"code\":\"Text input → value\\nCheckbox → checked\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"43e82a1b-bf50-4dcb-88d0-fda80d104289","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React’s input reference says checkboxes and radio buttons use ","styles":{}},{"type":"text","text":"checked","styles":{"code":true}},{"type":"text","text":" or ","styles":{}},{"type":"text","text":"defaultChecked","styles":{"code":true}},{"type":"text","text":", not ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":" or ","styles":{}},{"type":"text","text":"defaultValue","styles":{"code":true}},{"type":"text","text":", to control whether they are selected.","styles":{}}],"children":[]},{"id":"264062e2-bfaf-4d90-a3ea-6a621dbc4976","type":"divider","props":{},"children":[]},{"id":"6559ec68-0544-4197-9331-56c6c7e8b0a8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Radio Button","styles":{}}],"children":[]},{"id":"b8e637f7-ed02-414d-a4ae-deb0c6982574","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Radio buttons usually share the same state value.","styles":{}}],"children":[]},{"id":"4b146014-91be-435d-90f1-a2499d09f16d","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function GenderRadio() {\n const [gender, setGender] = useState(\"male\")\n\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"t9k2epxps\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function GenderRadio() {\\n const [gender, setGender] = useState(\\\"male\\\")\\n\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9b9a7e56-71ec-48fd-9727-dc0175eaea88","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"ed4769d9-f37c-491e-8d70-3c290c5ec3be","type":"procode","props":{"code":"Radio state stores the selected option.\n","language":"txt","filename":"","files":"[{\"id\":\"blv8kznrv\",\"name\":\"code\",\"code\":\"Radio state stores the selected option.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d3619830-49b9-45e7-9aba-a3d08b04e8e6","type":"divider","props":{},"children":[]},{"id":"3218a486-f879-4dc2-a39c-700b63d01218","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Controlled Form with Object State","styles":{}}],"children":[]},{"id":"eb0b1325-a48d-4502-a7b9-38fc57c04cfb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For many inputs, object state is cleaner.","styles":{}}],"children":[]},{"id":"c05b48aa-652e-4ab2-a6c2-65b2af0fb154","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function RegisterForm() {\n const [form, setForm] = useState({\n name: \"\",\n email: \"\",\n password: \"\",\n })\n\n function handleChange(event: React.ChangeEvent) {\n const { name, value } = event.target\n\n setForm((prevForm) => ({\n ...prevForm,\n [name]: value,\n }))\n }\n\n return (\n

\n \n\n \n\n \n\n

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

\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"xnrwrnqnm\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function RegisterForm() {\\n const [form, setForm] = useState({\\n name: \\\"\\\",\\n email: \\\"\\\",\\n password: \\\"\\\",\\n })\\n\\n function handleChange(event: React.ChangeEvent) {\\n const { name, value } = event.target\\n\\n setForm((prevForm) => ({\\n ...prevForm,\\n [name]: value,\\n }))\\n }\\n\\n return (\\n

\\n \\n\\n \\n\\n \\n\\n

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

\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0e2a9fe4-6590-40b5-b102-e6fee3a5b7cb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"2572b5be-62f9-4b54-afb6-a33f7a3f8958","type":"procode","props":{"code":"One form object can control many inputs.\n","language":"txt","filename":"","files":"[{\"id\":\"0x06c3ih5\",\"name\":\"code\",\"code\":\"One form object can control many inputs.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"23f7c9ec-9576-41f7-896a-fc619eaffb6f","type":"divider","props":{},"children":[]},{"id":"031b3a24-e80e-4d15-92a6-aa6114f27893","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Controlled Form Submit","styles":{}}],"children":[]},{"id":"35bac253-73fc-4b09-8757-9a21dfd15e43","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function LoginForm() {\n const [form, setForm] = useState({\n email: \"\",\n password: \"\",\n })\n\n function handleChange(event: React.ChangeEvent) {\n const { name, value } = event.target\n\n setForm((prevForm) => ({\n ...prevForm,\n [name]: value,\n }))\n }\n\n function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n\n console.log(\"Login data:\", form)\n }\n\n return (\n

\n \n\n \n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"slrzb2lwr\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function LoginForm() {\\n const [form, setForm] = useState({\\n email: \\\"\\\",\\n password: \\\"\\\",\\n })\\n\\n function handleChange(event: React.ChangeEvent) {\\n const { name, value } = event.target\\n\\n setForm((prevForm) => ({\\n ...prevForm,\\n [name]: value,\\n }))\\n }\\n\\n function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n\\n console.log(\\\"Login data:\\\", form)\\n }\\n\\n return (\\n

\\n \\n\\n \\n\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"129cf06b-741c-4a4f-97bc-91a4f03658e0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple flow:","styles":{}}],"children":[]},{"id":"8c9d42e5-62fe-4a6b-94ac-746c21ef012f","type":"procode","props":{"code":"User types\n├── state updates\n├── form state stores latest values\n└── submit uses form state\n","language":"txt","filename":"","files":"[{\"id\":\"39kg7sox9\",\"name\":\"code\",\"code\":\"User types\\n├── state updates\\n├── form state stores latest values\\n└── submit uses form state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4190cea2-1390-43ff-a142-7349fc4deb8a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React’s form examples use ","styles":{}},{"type":"text","text":"event.preventDefault()","styles":{"code":true}},{"type":"text","text":" to stop the browser’s default page reload and allow JavaScript to handle the submitted form data.","styles":{}}],"children":[]},{"id":"734e91c4-429c-4680-8b39-67b0c3994ca7","type":"divider","props":{},"children":[]},{"id":"094bef57-601d-4dcb-b2fa-18f4567e1a77","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Controlled Validation","styles":{}}],"children":[]},{"id":"98a3e3f7-ee0e-4585-aa16-ffa0a1de790e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Controlled components make validation easier.","styles":{}}],"children":[]},{"id":"5f096edd-4626-4e61-841c-1fb78b9bbeb3","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function EmailForm() {\n const [email, setEmail] = useState(\"\")\n\n const isValid = email.includes(\"@\")\n const showError = email.length > 0 && !isValid\n\n return (\n

\n setEmail(event.target.value)}\n placeholder=\"Email\"\n />\n\n {showError && (\n

\n Email must include @\n

\n )}\n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"2n5qgano3\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function EmailForm() {\\n const [email, setEmail] = useState(\\\"\\\")\\n\\n const isValid = email.includes(\\\"@\\\")\\n const showError = email.length > 0 && !isValid\\n\\n return (\\n

\\n setEmail(event.target.value)}\\n placeholder=\\\"Email\\\"\\n />\\n\\n {showError && (\\n

\\n Email must include @\\n

\\n )}\\n\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f438a7d2-d620-4fc3-982c-fa9af71b8eeb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"d6a39e56-e428-478e-952a-316a96ef2680","type":"procode","props":{"code":"Because value is in state, validation can happen immediately.\n","language":"txt","filename":"","files":"[{\"id\":\"xo43e279u\",\"name\":\"code\",\"code\":\"Because value is in state, validation can happen immediately.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cdd49702-4959-4b60-90bd-b2ff54e43a76","type":"divider","props":{},"children":[]},{"id":"916efa0c-ee65-485c-8f94-3da0cc5b8be8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Controlled Reset Form","styles":{}}],"children":[]},{"id":"eef554ed-c6eb-4992-81c4-de953eab61f0","type":"procode","props":{"code":"import { useState } from \"react\"\n\nconst initialForm = {\n name: \"\",\n email: \"\",\n}\n\nexport default function ProfileForm() {\n const [form, setForm] = useState(initialForm)\n\n function handleChange(event: React.ChangeEvent) {\n const { name, value } = event.target\n\n setForm((prevForm) => ({\n ...prevForm,\n [name]: value,\n }))\n }\n\n function resetForm() {\n setForm(initialForm)\n }\n\n return (\n

\n \n\n \n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"tzaju6si3\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nconst initialForm = {\\n name: \\\"\\\",\\n email: \\\"\\\",\\n}\\n\\nexport default function ProfileForm() {\\n const [form, setForm] = useState(initialForm)\\n\\n function handleChange(event: React.ChangeEvent) {\\n const { name, value } = event.target\\n\\n setForm((prevForm) => ({\\n ...prevForm,\\n [name]: value,\\n }))\\n }\\n\\n function resetForm() {\\n setForm(initialForm)\\n }\\n\\n return (\\n

\\n \\n\\n \\n\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1b8d8fd9-1425-42ad-bc27-6e097e135e83","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"0f6fd0c2-fe44-47ab-bf1c-9552365535df","type":"procode","props":{"code":"Reset form = set state back to initial value.\n","language":"txt","filename":"","files":"[{\"id\":\"pc6rq3aqg\",\"name\":\"code\",\"code\":\"Reset form = set state back to initial value.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8180908d-c5ed-4212-ab05-01efe0cb911b","type":"divider","props":{},"children":[]},{"id":"f0972141-32c6-45bd-ace9-90b4b3c41ee2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Controlled vs Uncontrolled Components","styles":{}}],"children":[]},{"id":"2a10bec0-e6e6-480c-b534-46f1cec2c97b","type":"procode","props":{"code":"Controlled Component\n├── Value controlled by React state\n├── Uses value or checked\n├── Uses onChange\n├── Easier validation\n├── Easier reset\n└── Easier dynamic UI\n\nUncontrolled Component\n├── Value controlled by the DOM\n├── Uses defaultValue or defaultChecked\n├── Can read value on submit\n├── Less state code\n└── Useful for simple forms\n","language":"txt","filename":"","files":"[{\"id\":\"fonzo0yj9\",\"name\":\"code\",\"code\":\"Controlled Component\\n├── Value controlled by React state\\n├── Uses value or checked\\n├── Uses onChange\\n├── Easier validation\\n├── Easier reset\\n└── Easier dynamic UI\\n\\nUncontrolled Component\\n├── Value controlled by the DOM\\n├── Uses defaultValue or defaultChecked\\n├── Can read value on submit\\n├── Less state code\\n└── Useful for simple forms\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"082a82a8-c064-4947-8a0c-1406805fb47d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Controlled example:","styles":{}}],"children":[]},{"id":"fd8cd089-be06-437f-b62a-919f67a5981d","type":"procode","props":{"code":" setEmail(event.target.value)}\n/>\n","language":"tsx","filename":"","files":"[{\"id\":\"yo9e662y3\",\"name\":\"code\",\"code\":\" setEmail(event.target.value)}\\n/>\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9d2c5469-0f42-4d2c-b5e6-e04c595263fd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Uncontrolled example:","styles":{}}],"children":[]},{"id":"30b80214-4ab6-4719-bd52-e50bb4188a2a","type":"procode","props":{"code":"\n","language":"tsx","filename":"","files":"[{\"id\":\"2sbrydsbl\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"522539b0-e4fd-466e-b113-7e1b3c4f44fb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React separates controlled inputs from uncontrolled inputs: controlled inputs use ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":" or ","styles":{}},{"type":"text","text":"checked","styles":{"code":true}},{"type":"text","text":", while uncontrolled inputs use ","styles":{}},{"type":"text","text":"defaultValue","styles":{"code":true}},{"type":"text","text":" or ","styles":{}},{"type":"text","text":"defaultChecked","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"8c0f1e77-c5f2-4cc7-96ed-9e2c6fca4b5d","type":"divider","props":{},"children":[]},{"id":"b5e9b61b-2f24-465c-b192-1ec67db2466a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Do Not Mix Controlled and Uncontrolled","styles":{}}],"children":[]},{"id":"a1542365-575d-4fda-aafe-14840f2537f4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"b2bc2a85-c700-40c8-80f5-1d44242a7753","type":"procode","props":{"code":" setEmail(event.target.value)}\n/>\n","language":"tsx","filename":"","files":"[{\"id\":\"wcujwkjdx\",\"name\":\"code\",\"code\":\" setEmail(event.target.value)}\\n/>\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"44fdb920-cb28-4eab-868d-cb1e9e0aa08e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why bad?","styles":{}}],"children":[]},{"id":"9cea081f-abc0-48ce-a3d0-6909d2625031","type":"procode","props":{"code":"value means controlled.\ndefaultValue means uncontrolled initial value.\nDo not use both for the same input.\n","language":"txt","filename":"","files":"[{\"id\":\"88e8wqgbb\",\"name\":\"code\",\"code\":\"value means controlled.\\ndefaultValue means uncontrolled initial value.\\nDo not use both for the same input.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"00d52cb1-fa9b-423d-811b-3ad3c947813b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better controlled:","styles":{}}],"children":[]},{"id":"16261272-4825-4c8d-a97f-58beb4e74fbe","type":"procode","props":{"code":" setEmail(event.target.value)}\n/>\n","language":"tsx","filename":"","files":"[{\"id\":\"8xwdgbmrt\",\"name\":\"code\",\"code\":\" setEmail(event.target.value)}\\n/>\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e48fdb3b-2809-4809-a446-7045e4a0509d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better uncontrolled:","styles":{}}],"children":[]},{"id":"854d3032-e15f-4159-b5a0-87e1fd3f28ac","type":"procode","props":{"code":"\n","language":"tsx","filename":"","files":"[{\"id\":\"fn54h7hrk\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"10ee4f29-5dfe-4c4e-b49c-efaacba4db48","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React’s input caveats say an input cannot be both controlled and uncontrolled at the same time and should not switch between controlled and uncontrolled during its lifetime.","styles":{}}],"children":[]},{"id":"739e4efc-effc-43b8-95f8-875a9ac74a09","type":"divider","props":{},"children":[]},{"id":"59c0b00d-a02c-45fb-8a4d-752ba42bf15f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Avoid Undefined Value","styles":{}}],"children":[]},{"id":"0ab279a0-67d5-4e41-a31b-61dcc7a7e063","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"510664a9-dac4-4987-810f-2d177ecdd3b6","type":"procode","props":{"code":"const [email, setEmail] = useState(undefined)\n\n setEmail(event.target.value)}\n/>\n","language":"tsx","filename":"","files":"[{\"id\":\"zl2nndbss\",\"name\":\"code\",\"code\":\"const [email, setEmail] = useState(undefined)\\n\\n setEmail(event.target.value)}\\n/>\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"35cf05a6-7003-41c9-9059-83dd3db51eb4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"752e8616-1f4e-4962-bd0f-4c4d7a438d30","type":"procode","props":{"code":"Input may start uncontrolled and become controlled later.\n","language":"txt","filename":"","files":"[{\"id\":\"ko1dzhs0v\",\"name\":\"code\",\"code\":\"Input may start uncontrolled and become controlled later.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"df249b68-3dc8-4ffb-bac6-3d4968671235","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"6d251333-f74f-41a1-b8fe-24337964514e","type":"procode","props":{"code":"const [email, setEmail] = useState(\"\")\n\n setEmail(event.target.value)}\n/>\n","language":"tsx","filename":"","files":"[{\"id\":\"zw7vyu1xa\",\"name\":\"code\",\"code\":\"const [email, setEmail] = useState(\\\"\\\")\\n\\n setEmail(event.target.value)}\\n/>\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"48fe9382-3cbe-477b-bc30-1c88060f76a0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"7f1e6c1b-7b61-4383-a617-9ba74e1776d8","type":"procode","props":{"code":"Use empty string for controlled text input initial value.\n","language":"txt","filename":"","files":"[{\"id\":\"zbshweq3m\",\"name\":\"code\",\"code\":\"Use empty string for controlled text input initial value.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"52983bc3-082c-4231-97d3-c225477189cc","type":"divider","props":{},"children":[]},{"id":"cae7ebc9-7951-4efc-bef7-d19b4a079c0f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Read-only Controlled Input","styles":{}}],"children":[]},{"id":"fc9da21b-f8eb-4d6c-95f4-fff7b880d640","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"f1bfcca3-c1a8-4e53-9f84-36003b9afff7","type":"procode","props":{"code":"\n","language":"tsx","filename":"","files":"[{\"id\":\"0godz5p7x\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"47902ff7-0539-4655-b663-1aebceb2e676","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"616e042b-2622-4261-8ef3-20915ab62980","type":"procode","props":{"code":"Input has value but no onChange.\nUser cannot type normally.\nReact may warn.\n","language":"txt","filename":"","files":"[{\"id\":\"zdkn0zcao\",\"name\":\"code\",\"code\":\"Input has value but no onChange.\\nUser cannot type normally.\\nReact may warn.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dd08af53-88be-41a1-8356-89002343c036","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"49b4e969-ad39-4640-bda6-1d77b99a0161","type":"procode","props":{"code":" setEmail(event.target.value)}\n/>\n","language":"tsx","filename":"","files":"[{\"id\":\"u6af2vcgd\",\"name\":\"code\",\"code\":\" setEmail(event.target.value)}\\n/>\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f934e4c4-8288-4964-9d82-104b5a89d662","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If it should not be editable:","styles":{}}],"children":[]},{"id":"680574ea-1f29-47a8-976c-324592a8ff10","type":"procode","props":{"code":"\n","language":"tsx","filename":"","files":"[{\"id\":\"dppgk6o8p\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dbc7af8d-e833-45ce-bfcf-f92d62690fda","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"a9ffaf78-2999-4f66-96b4-c8bfa391cd33","type":"procode","props":{"code":"Controlled editable input needs onChange.\n","language":"txt","filename":"","files":"[{\"id\":\"grjqfljhl\",\"name\":\"code\",\"code\":\"Controlled editable input needs onChange.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cf458b04-09ae-47c6-8a9b-ba26c56d582a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React’s input docs say every controlled input needs an ","styles":{}},{"type":"text","text":"onChange","styles":{"code":true}},{"type":"text","text":" handler that synchronously updates its backing value.","styles":{}}],"children":[]},{"id":"d511da2e-f4f3-4825-bb9a-ca94d5eb6829","type":"divider","props":{},"children":[]},{"id":"a4ed3737-8a7d-4fbb-9248-4e330a0e6889","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Controlled Checkbox Group","styles":{}}],"children":[]},{"id":"23a62e89-6d53-4080-a2b3-fb47d3f8cebf","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function SkillCheckboxes() {\n const [skills, setSkills] = useState([])\n\n function toggleSkill(skill: string) {\n setSkills((prevSkills) =>\n prevSkills.includes(skill)\n ? prevSkills.filter((item) => item !== skill)\n : [...prevSkills, skill]\n )\n }\n\n return (\n

\n {[\"React\", \"TypeScript\", \"Tailwind\"].map((skill) => (\n \n toggleSkill(skill)}\n />\n {skill}\n \n ))}\n\n

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

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"59sd072lg\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function SkillCheckboxes() {\\n const [skills, setSkills] = useState([])\\n\\n function toggleSkill(skill: string) {\\n setSkills((prevSkills) =>\\n prevSkills.includes(skill)\\n ? prevSkills.filter((item) => item !== skill)\\n : [...prevSkills, skill]\\n )\\n }\\n\\n return (\\n

\\n {[\\\"React\\\", \\\"TypeScript\\\", \\\"Tailwind\\\"].map((skill) => (\\n \\n toggleSkill(skill)}\\n />\\n {skill}\\n \\n ))}\\n\\n

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

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6e352758-4e2a-4578-bbfe-6d7b52f7ad34","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"bc713107-477b-4b94-a01a-ce5a1ba4a33d","type":"procode","props":{"code":"Checkbox group can be controlled with array state.\n","language":"txt","filename":"","files":"[{\"id\":\"dgng0o8fv\",\"name\":\"code\",\"code\":\"Checkbox group can be controlled with array state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"56957038-b982-436e-8016-0ec19efc1e88","type":"divider","props":{},"children":[]},{"id":"aecaeec6-3c03-4a38-a568-62799f4211ce","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Controlled Select with Multiple Values","styles":{}}],"children":[]},{"id":"97c0a4e3-f749-4d04-bd05-018b0645a08b","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function MultiSelect() {\n const [selected, setSelected] = useState([])\n\n function handleChange(event: React.ChangeEvent) {\n const values = Array.from(\n event.target.selectedOptions,\n (option) => option.value\n )\n\n setSelected(values)\n }\n\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"bfhu4kkay\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function MultiSelect() {\\n const [selected, setSelected] = useState([])\\n\\n function handleChange(event: React.ChangeEvent) {\\n const values = Array.from(\\n event.target.selectedOptions,\\n (option) => option.value\\n )\\n\\n setSelected(values)\\n }\\n\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"58c22d64-bae0-45c5-8710-78acbd29345e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"61d39f56-8f33-4bc7-9b73-77d9143d1582","type":"procode","props":{"code":"Multiple select can use array state.\n","language":"txt","filename":"","files":"[{\"id\":\"p4cz2vujh\",\"name\":\"code\",\"code\":\"Multiple select can use array state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"01ff76ff-d030-4abf-b62e-09417bc5fbc0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React’s select documentation supports controlling a select box with ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":", and for ","styles":{}},{"type":"text","text":"multiple={true}","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":" can be an array of selected values.","styles":{}}],"children":[]},{"id":"ae647e22-0269-4209-bb97-f5fff428b401","type":"divider","props":{},"children":[]},{"id":"0ed9453f-3bda-4c6e-acf9-3c05d13a4c5f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Controlled Components with TypeScript","styles":{}}],"children":[]},{"id":"198890ce-6118-484d-8e15-946ec596bcde","type":"procode","props":{"code":"import { useState } from \"react\"\n\ntype LoginFormState = {\n email: string\n password: string\n}\n\nconst initialForm: LoginFormState = {\n email: \"\",\n password: \"\",\n}\n\nexport default function LoginForm() {\n const [form, setForm] = useState(initialForm)\n\n function handleChange(event: React.ChangeEvent) {\n const { name, value } = event.target\n\n setForm((prevForm) => ({\n ...prevForm,\n [name]: value,\n }))\n }\n\n function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n console.log(form)\n }\n\n return (\n

\n \n\n \n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"q8susvnxw\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\ntype LoginFormState = {\\n email: string\\n password: string\\n}\\n\\nconst initialForm: LoginFormState = {\\n email: \\\"\\\",\\n password: \\\"\\\",\\n}\\n\\nexport default function LoginForm() {\\n const [form, setForm] = useState(initialForm)\\n\\n function handleChange(event: React.ChangeEvent) {\\n const { name, value } = event.target\\n\\n setForm((prevForm) => ({\\n ...prevForm,\\n [name]: value,\\n }))\\n }\\n\\n function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n console.log(form)\\n }\\n\\n return (\\n

\\n \\n\\n \\n\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c649e557-ceba-4ec5-b8fd-98293f9b5ee6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"383e8bf5-5436-4f95-b609-8f38ae70cac0","type":"procode","props":{"code":"TypeScript makes controlled form state safer.\n","language":"txt","filename":"","files":"[{\"id\":\"8axx7h860\",\"name\":\"code\",\"code\":\"TypeScript makes controlled form state safer.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"54db1db3-8fa1-49c7-8526-e423309d888c","type":"divider","props":{},"children":[]},{"id":"cf09c0ad-9f77-4257-b632-2a2466890568","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Controlled Components with Zod Preview","styles":{}}],"children":[]},{"id":"6cdba39f-3e1e-46f1-a1a5-122bf2229dd8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Controlled components work well with validation libraries.","styles":{}}],"children":[]},{"id":"82ce0900-319d-4116-b8bb-ac1c763238fc","type":"procode","props":{"code":"import { z } from \"zod\"\n\nconst loginSchema = z.object({\n email: z.string().email(),\n password: z.string().min(8),\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"wrz712tno\",\"name\":\"code\",\"code\":\"import { z } from \\\"zod\\\"\\n\\nconst loginSchema = z.object({\\n email: z.string().email(),\\n password: z.string().min(8),\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"04b75ead-0eb4-45e6-848c-919164a94053","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Submit:","styles":{}}],"children":[]},{"id":"a108bc76-b3a7-458d-8448-69e1fcdb41ac","type":"procode","props":{"code":"const result = loginSchema.safeParse(form)\n\nif (!result.success) {\n console.log(result.error.flatten().fieldErrors)\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"leplej4zi\",\"name\":\"code\",\"code\":\"const result = loginSchema.safeParse(form)\\n\\nif (!result.success) {\\n console.log(result.error.flatten().fieldErrors)\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d801b834-c331-4f28-96c4-0dbc7a39d743","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"3e238ae5-5e6f-4cc5-96cf-a3164114fa60","type":"procode","props":{"code":"Controlled form state can be validated before submit.\n","language":"txt","filename":"","files":"[{\"id\":\"ndvmzqguf\",\"name\":\"code\",\"code\":\"Controlled form state can be validated before submit.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ff988d16-da71-4bc8-88db-e887bbadeb94","type":"divider","props":{},"children":[]},{"id":"f62ddca7-29d3-4d4a-b0d7-ce7992170510","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When to Use Controlled Components","styles":{}}],"children":[]},{"id":"490bbc5f-a168-49f3-9a24-b18511f982b5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use controlled components when:","styles":{}}],"children":[]},{"id":"d408cb4e-55a1-4a52-bd73-4b4afb4b3afa","type":"procode","props":{"code":"You need live validation\nYou need instant search\nYou need dynamic error messages\nYou need to disable submit button\nYou need to reset form with state\nYou need to format input value\nYou need conditional form UI\nYou need to save draft value\nYou need React to know the input value immediately\n","language":"txt","filename":"","files":"[{\"id\":\"2jym84te9\",\"name\":\"code\",\"code\":\"You need live validation\\nYou need instant search\\nYou need dynamic error messages\\nYou need to disable submit button\\nYou need to reset form with state\\nYou need to format input value\\nYou need conditional form UI\\nYou need to save draft value\\nYou need React to know the input value immediately\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fc86c09e-9586-497b-97d5-c4ba72cc17ca","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"b15bdcea-e0aa-4fdf-8e93-75858edb3d2d","type":"procode","props":{"code":"If React needs to react to every input change, use controlled component.\n","language":"txt","filename":"","files":"[{\"id\":\"dwukika5x\",\"name\":\"code\",\"code\":\"If React needs to react to every input change, use controlled component.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f4121554-b1e9-4760-841b-90f7f4d1c1de","type":"divider","props":{},"children":[]},{"id":"444f32d4-082a-4963-95ad-8da325736bfc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Not to Use Controlled Components","styles":{}}],"children":[]},{"id":"0acd79fc-fc7d-4e47-abc4-99c915c990df","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Controlled components may be unnecessary when:","styles":{}}],"children":[]},{"id":"ebef3fe5-0d9c-44e4-bc95-ac4250877fb5","type":"procode","props":{"code":"Form is very simple\nYou only need value on submit\nYou do not need live validation\nYou do not need dynamic UI\nYou have many fields and performance becomes an issue\n","language":"txt","filename":"","files":"[{\"id\":\"s32ctawc6\",\"name\":\"code\",\"code\":\"Form is very simple\\nYou only need value on submit\\nYou do not need live validation\\nYou do not need dynamic UI\\nYou have many fields and performance becomes an issue\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b0355b90-e6ce-4a39-8c6a-405f25c9b3bb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Alternative:","styles":{}}],"children":[]},{"id":"e6ff9d30-0b46-4717-affe-c493cd43e9c3","type":"procode","props":{"code":"Use uncontrolled input with FormData\nUse React Hook Form\nUse form library for large forms\n","language":"txt","filename":"","files":"[{\"id\":\"pz921sidi\",\"name\":\"code\",\"code\":\"Use uncontrolled input with FormData\\nUse React Hook Form\\nUse form library for large forms\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"845ad987-0744-4b70-9899-97a3a1674767","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"9e9ef29e-b11f-4161-a061-7e94cc1aba90","type":"procode","props":{"code":"Not every form input must be controlled manually.\n","language":"txt","filename":"","files":"[{\"id\":\"m6ewtwugb\",\"name\":\"code\",\"code\":\"Not every form input must be controlled manually.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9cc91d72-5cc5-4609-84e3-19be91efbd8d","type":"divider","props":{},"children":[]},{"id":"e678b706-1708-42b2-aeb4-ad22de420c71","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common Mistakes","styles":{}}],"children":[]},{"id":"38b5996d-5f0b-435e-9fa0-b8975b7d55e4","type":"procode","props":{"code":"Mistake 1: Using value without onChange\nMistake 2: Using checked incorrectly for checkbox\nMistake 3: Using value instead of checked for checkbox\nMistake 4: Mixing value and defaultValue\nMistake 5: Starting with undefined value\nMistake 6: Switching controlled input to uncontrolled\nMistake 7: Forgetting event.preventDefault on submit\nMistake 8: Mutating form object state directly\nMistake 9: Creating too many separate handlers unnecessarily\nMistake 10: Using controlled inputs for huge forms without optimization\n","language":"txt","filename":"","files":"[{\"id\":\"f2qqe2jep\",\"name\":\"code\",\"code\":\"Mistake 1: Using value without onChange\\nMistake 2: Using checked incorrectly for checkbox\\nMistake 3: Using value instead of checked for checkbox\\nMistake 4: Mixing value and defaultValue\\nMistake 5: Starting with undefined value\\nMistake 6: Switching controlled input to uncontrolled\\nMistake 7: Forgetting event.preventDefault on submit\\nMistake 8: Mutating form object state directly\\nMistake 9: Creating too many separate handlers unnecessarily\\nMistake 10: Using controlled inputs for huge forms without optimization\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"75ae2eba-5b92-4f90-b326-7c96479308e2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better approach:","styles":{}}],"children":[]},{"id":"76ef6a67-0411-473f-b508-d02f6bb4711e","type":"procode","props":{"code":"Use value with onChange.\nUse checked for checkbox.\nUse empty string as initial text value.\nUse object state for related form fields.\nUse functional update for object state.\n","language":"txt","filename":"","files":"[{\"id\":\"t9xgyoorx\",\"name\":\"code\",\"code\":\"Use value with onChange.\\nUse checked for checkbox.\\nUse empty string as initial text value.\\nUse object state for related form fields.\\nUse functional update for object state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"90a5f1b6-e961-47ad-ac4e-f524c7f05d89","type":"divider","props":{},"children":[]},{"id":"3ca566df-ae6b-4013-96d0-46493197f9e1","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Bad vs Good Pattern","styles":{}}],"children":[]},{"id":"826f032f-2ca5-46f2-aac7-dd85c043c913","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"e579294f-aeef-4978-b0ca-313f2fd4e302","type":"procode","props":{"code":"\n","language":"tsx","filename":"","files":"[{\"id\":\"tltvn5w89\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8e04fa26-17fa-454c-9c34-56801f623a47","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good:","styles":{}}],"children":[]},{"id":"5767820b-04eb-4afa-8f09-abfe97a1dfa3","type":"procode","props":{"code":" setEmail(event.target.value)}\n/>\n","language":"tsx","filename":"","files":"[{\"id\":\"rl0bczphj\",\"name\":\"code\",\"code\":\" setEmail(event.target.value)}\\n/>\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4815cba7-0ef0-45c1-b700-6992410fa124","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"0b0f5f68-0bd4-47f6-a60c-68a868ef2c71","type":"procode","props":{"code":" setAccepted(event.target.value)}\n/>\n","language":"tsx","filename":"","files":"[{\"id\":\"pljtt659v\",\"name\":\"code\",\"code\":\" setAccepted(event.target.value)}\\n/>\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bca71a24-789c-42e9-a050-32bcbf2f55ee","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good:","styles":{}}],"children":[]},{"id":"97d11db5-4e33-41a7-b097-233c84a8eba8","type":"procode","props":{"code":" setAccepted(event.target.checked)}\n/>\n","language":"tsx","filename":"","files":"[{\"id\":\"q8fuvxad0\",\"name\":\"code\",\"code\":\" setAccepted(event.target.checked)}\\n/>\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8ac91e59-1c15-4058-a149-f44cccbc56ba","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"e76d2fcf-a5d6-42e6-86fb-361b6ed68914","type":"procode","props":{"code":"\n","language":"tsx","filename":"","files":"[{\"id\":\"wpowe6pip\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dc268aff-d69a-4ac3-b82f-c5c9b2cf8383","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good:","styles":{}}],"children":[]},{"id":"74e59d73-be73-4e61-833f-e1a1163920fa","type":"procode","props":{"code":" setEmail(event.target.value)}\n/>\n","language":"tsx","filename":"","files":"[{\"id\":\"07ifn8uxz\",\"name\":\"code\",\"code\":\" setEmail(event.target.value)}\\n/>\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b35118eb-98ad-4fe5-a37f-75cb71acd3ad","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"f472c6e1-d0da-4173-9760-b3665f45e654","type":"procode","props":{"code":"Controlled input must have a clear source of truth.\n","language":"txt","filename":"","files":"[{\"id\":\"hehgh7vc8\",\"name\":\"code\",\"code\":\"Controlled input must have a clear source of truth.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"976c00e1-a160-4a96-9a82-887ac90c4183","type":"divider","props":{},"children":[]},{"id":"efa218bb-7dc3-4520-b4b9-c2480f3d0d96","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional Pattern","styles":{}}],"children":[]},{"id":"181b54f2-e545-4c73-a8ac-c372aa85ba24","type":"procode","props":{"code":"Professional Controlled Component Pattern\n├── Use state as source of truth\n├── Use value for text input\n├── Use value for textarea\n├── Use value for select\n├── Use checked for checkbox and radio\n├── Use onChange to update state\n├── Use object state for related form fields\n├── Use empty string as initial text value\n├── Use false as initial checkbox value\n├── Use event.preventDefault on submit\n├── Validate controlled state before submit\n├── Avoid mixing controlled and uncontrolled input\n├── Avoid direct state mutation\n└── Use React Hook Form for large complex forms\n","language":"txt","filename":"","files":"[{\"id\":\"pqpdqp5v1\",\"name\":\"code\",\"code\":\"Professional Controlled Component Pattern\\n├── Use state as source of truth\\n├── Use value for text input\\n├── Use value for textarea\\n├── Use value for select\\n├── Use checked for checkbox and radio\\n├── Use onChange to update state\\n├── Use object state for related form fields\\n├── Use empty string as initial text value\\n├── Use false as initial checkbox value\\n├── Use event.preventDefault on submit\\n├── Validate controlled state before submit\\n├── Avoid mixing controlled and uncontrolled input\\n├── Avoid direct state mutation\\n└── Use React Hook Form for large complex forms\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c1036c18-6979-4d01-aaa4-5833df2d916e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Recommended form pattern:","styles":{}}],"children":[]},{"id":"249525ad-fd64-4e00-ab36-f3eb69b2d5da","type":"procode","props":{"code":"import { useState } from \"react\"\n\ntype FormState = {\n email: string\n password: string\n rememberMe: boolean\n}\n\nconst initialForm: FormState = {\n email: \"\",\n password: \"\",\n rememberMe: false,\n}\n\nexport default function LoginForm() {\n const [form, setForm] = useState(initialForm)\n\n function handleTextChange(event: React.ChangeEvent) {\n const { name, value } = event.target\n\n setForm((prevForm) => ({\n ...prevForm,\n [name]: value,\n }))\n }\n\n function handleCheckboxChange(event: React.ChangeEvent) {\n const { name, checked } = event.target\n\n setForm((prevForm) => ({\n ...prevForm,\n [name]: checked,\n }))\n }\n\n function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n\n console.log(\"Submit:\", form)\n }\n\n return (\n

\n \n\n \n\n \n \n Remember me\n \n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"j67q63sil\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\ntype FormState = {\\n email: string\\n password: string\\n rememberMe: boolean\\n}\\n\\nconst initialForm: FormState = {\\n email: \\\"\\\",\\n password: \\\"\\\",\\n rememberMe: false,\\n}\\n\\nexport default function LoginForm() {\\n const [form, setForm] = useState(initialForm)\\n\\n function handleTextChange(event: React.ChangeEvent) {\\n const { name, value } = event.target\\n\\n setForm((prevForm) => ({\\n ...prevForm,\\n [name]: value,\\n }))\\n }\\n\\n function handleCheckboxChange(event: React.ChangeEvent) {\\n const { name, checked } = event.target\\n\\n setForm((prevForm) => ({\\n ...prevForm,\\n [name]: checked,\\n }))\\n }\\n\\n function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n\\n console.log(\\\"Submit:\\\", form)\\n }\\n\\n return (\\n

\\n \\n\\n \\n\\n \\n \\n Remember me\\n \\n\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d900f39c-e334-4679-b8da-9d24eef9ea1c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"12fab25a-372d-48d7-956a-04608c136eb2","type":"procode","props":{"code":"A professional controlled form separates text handling and checkbox handling.\n","language":"txt","filename":"","files":"[{\"id\":\"27g1iilwx\",\"name\":\"code\",\"code\":\"A professional controlled form separates text handling and checkbox handling.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"aeacc635-ff6e-4974-a8fd-8272233a6d87","type":"divider","props":{},"children":[]},{"id":"f38349ab-9bab-41c7-932a-444ab10c2bc2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Mental Model","styles":{}}],"children":[]},{"id":"7cf59bce-6df8-4ed4-b9bb-b9e07e8639dc","type":"procode","props":{"code":"Controlled Component = React owns the form value\n","language":"txt","filename":"","files":"[{\"id\":\"jt1auzqjk\",\"name\":\"code\",\"code\":\"Controlled Component = React owns the form value\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dae886f7-fc8e-4034-aa65-6b0e047b6bfd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"5c7f1ef3-2b84-45f1-81fa-984b0f9baa2a","type":"procode","props":{"code":"Input displays state\n├── user types\n├── onChange updates state\n├── React re-renders\n└── input displays new state\n","language":"txt","filename":"","files":"[{\"id\":\"ic8ivbwlh\",\"name\":\"code\",\"code\":\"Input displays state\\n├── user types\\n├── onChange updates state\\n├── React re-renders\\n└── input displays new state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b329a025-c685-432c-884c-9517b048e8d6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Another way:","styles":{}}],"children":[]},{"id":"7ed21710-2975-4853-b48c-7bb111a67002","type":"procode","props":{"code":"State → value\nonChange → setState\n","language":"txt","filename":"","files":"[{\"id\":\"hxa7iw3em\",\"name\":\"code\",\"code\":\"State → value\\nonChange → setState\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d1fe8395-3c8e-453c-a7aa-c1cfb321fb89","type":"divider","props":{},"children":[]},{"id":"b2981c44-8c5a-479f-a708-0a4bf7173c85","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Summary","styles":{}}],"children":[]},{"id":"0e87a733-eafb-4f42-802d-175502509680","type":"procode","props":{"code":"Controlled Components\n├── Are form inputs controlled by React state\n├── Use value for text input\n├── Use value for textarea\n├── Use value for select\n├── Use checked for checkbox and radio\n├── Need onChange to update state\n├── Make validation easier\n├── Make reset easier\n├── Make dynamic UI easier\n├── Store latest input value in state\n├── Should not mix value and defaultValue\n├── Should not switch between controlled and uncontrolled\n├── Should use empty string for initial text input\n├── Should use false for initial checkbox input\n└── Are common in React forms\n","language":"txt","filename":"","files":"[{\"id\":\"ms95nrmjj\",\"name\":\"code\",\"code\":\"Controlled Components\\n├── Are form inputs controlled by React state\\n├── Use value for text input\\n├── Use value for textarea\\n├── Use value for select\\n├── Use checked for checkbox and radio\\n├── Need onChange to update state\\n├── Make validation easier\\n├── Make reset easier\\n├── Make dynamic UI easier\\n├── Store latest input value in state\\n├── Should not mix value and defaultValue\\n├── Should not switch between controlled and uncontrolled\\n├── Should use empty string for initial text input\\n├── Should use false for initial checkbox input\\n└── Are common in React forms\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"894d1817-0612-47d6-8d49-f32102cc2678","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Controlled Components are important because they make React the source of truth for form inputs. This makes forms easier to validate, reset, submit, and connect to dynamic UI.","styles":{}}],"children":[]},{"id":"8df6bcf0-5ce0-4b61-bf42-b198408011a5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]