\"}),` DOM node which has a reference to\nthe elements of the form which can be used to get the values out of the form!`]}),`\n`,(0,a.jsxs)(e.p,{children:[`You can also use this to create an instance of a\n`,(0,a.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/FormData\",children:(0,a.jsx)(e.code,{children:\"FormData\"})}),` object\nwhich is the standard object for representing form data in JavaScript.`]}),`\n`,(0,a.jsx)(e.p,{children:`The interesting thing about forms is that they have been around since the very\nbeginning of the web when expectations of web applications were a little\ndifferent from the expectations of modern applications. Specifically, full-page\nrefreshes were the norm.`}),`\n`,(0,a.jsxs)(e.p,{children:[`So, when you submit a form, the browser will do a full-page refresh by default.\nThis is not what we want in a modern application where we want to stay on the\nsame page and just update the UI (even if we update the URL). It's inefficient\n(the browser has to re-process HTML, CSS, and JS with every refresh) and\nannoying for users to do a full-page refresh on every navigation and interaction\n(imagine if you had a full page refresh when you like post on \\u{1D54F}!). So you can\nprevent that behavior using JavaScript and the `,(0,a.jsx)(e.code,{children:\"onSubmit\"}),` event handler on the\nform.`]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"form\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onSubmit\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"preventDefault\"}),\"() \",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// prevent the default browser behavior\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"formData\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"FormData\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"currentTarget\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// do something with the form data\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t}\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"/* form fields go here */\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:`This is so common, React provides a built-in way to handle form actions which\nwe'll explore in this exercise.`}),`\n`,(0,a.jsx)(e.p,{children:`Form fields also should be labeled appropriately as well to make them accessible\nto screen readers and improve the overall user experience as well. There are a\nfew ways to do this. The easiest being to wrap the input within the label:`}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"label\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\tName\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"input\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"name\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"name\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"type\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"text\"}),'\"',\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[`But often our design requirements don't allow for that. In that case, we can use\nthe `,(0,a.jsx)(e.code,{children:\"htmlFor\"}),\" prop on the label to associate it with the input:\"]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"label\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"htmlFor\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"nameInput\"}),'\"',\">Name\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"input\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"id\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"nameInput\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"name\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"name\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"type\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"text\"}),'\"',\" />\",`\n`]})]})}),`\n`,(0,a.jsx)(\"callout-info\",{class:\"aside\",children:(0,a.jsxs)(e.p,{children:[\"As a reminder, in HTML the attribute is called \",(0,a.jsx)(e.code,{children:\"for\"}),`, but the DOM property is\n`,(0,a.jsx)(e.code,{children:\"htmlFor\"}),\" so that's what we use in React's props.\"]})})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}function x(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(D);})();\n;return Component;","finishedCode","var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},i=(e,t,o,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of h(t))!l.call(e,r)&&r!==o&&s(e,r,{get:()=>t[r],enumerable:!(c=f(t,r))||c.enumerable});return e};var j=(e,t,o)=>(o=e!=null?u(x(e)):{},i(t||!e||!e.__esModule?s(o,\"default\",{value:e,enumerable:!0}):o,e)),g=e=>i(s({},\"__esModule\",{value:!0}),e);var d=w((b,a)=>{a.exports=_jsx_runtime});var y={};_(y,{default:()=>p,frontmatter:()=>M});var n=j(d()),M=void 0;function m(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=t;return o||k(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:\"Forms\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-forms\"}),`\n`,(0,n.jsx)(t.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Hooray! You've gotten a good start on how to use HTML forms with React!\"})]})}function p(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(m,{...e})}):m(e)}function k(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(y);})();\n;return Component;","instructionsEpicVideoEmbeds",[871],"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-forms","finishedEpicVideoEmbeds",[874],"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-forms",[876,909,933,956,981],{"_477":509,"_475":877,"_580":897},{"_20":207,"_342":739,"_863":878,"_22":208,"_24":209,"_865":879,"_880":881,"_883":884,"_891":892,"_894":895,"_466":467,"_477":509,"_9":475,"_896":211},"01.problem.form","var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of l(e))!w.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(a=d(e,r))||a.enumerable});return t};var _=(t,e,o)=>(o=t!=null?m(p(t)):{},s(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),j=t=>s(i({},\"__esModule\",{value:!0}),t);var u=x((M,c)=>{c.exports=_jsx_runtime});var k={};b(k,{default:()=>h,frontmatter:()=>y});var n=_(u()),y=void 0;function f(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||g(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Form\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/form\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} We want to have an intake form which accepts a number of bits of information\nfor a new user. They'll need a username to start with, so let's just render that\nand the submit button for now.`}),`\n`,(0,n.jsx)(\"callout-info\",{children:(0,n.jsx)(e.p,{children:`\\u{1F989} You may notice a full page refresh when you submit the form. We'll talk\nabout this in a future step.`})})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(f,{...t})}):f(t)}function g(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(k);})();\n;return Component;","epicVideoEmbeds",[882],"https://www.epicreact.dev/workshops/react-fundamentals/form","test",{"_9":885,"_886":887,"_888":889},"browser","pathname","/app/07.01.problem/test/","testFiles",[890],"form.test.ts","dev",{"_9":885,"_886":893},"/app/07.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/07.forms/01.problem.form?view=editor&title=Form+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","solutionName",{"_20":211,"_342":739,"_863":898,"_22":212,"_24":213,"_865":899,"_880":900,"_883":902,"_891":905,"_894":907,"_466":467,"_477":509,"_9":580,"_908":-5},"01.solution.form","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var l=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of h(t))!x.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(s=f(t,r))||s.enumerable});return e};var g=(e,t,n)=>(n=e!=null?u(w(e)):{},c(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>c(i({},\"__esModule\",{value:!0}),e);var d=l((E,a)=>{a.exports=_jsx_runtime});var v={};_(v,{default:()=>p,frontmatter:()=>b});var o=g(d()),b=void 0;function m(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||k(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Form\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/form/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great job. We now have a form that we can type the username into and we can\nsubmit it. But we've got more work to do. Let's keep going.`})]})}function p(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}function k(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(v);})();\n;return Component;",[901],"https://www.epicreact.dev/workshops/react-fundamentals/form/solution",{"_9":885,"_886":903,"_888":904},"/app/07.01.solution/test/",[890],{"_9":885,"_886":906},"/app/07.01.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/07.forms/01.solution.form?view=editor&title=Form+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","problemName",{"_477":510,"_475":910,"_580":922},{"_20":215,"_342":741,"_863":911,"_22":216,"_24":217,"_865":912,"_880":913,"_883":915,"_891":919,"_894":921,"_466":467,"_477":510,"_9":475,"_896":219},"02.problem.action","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!g.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(a=m(e,r))||a.enumerable});return t};var y=(t,e,o)=>(o=t!=null?u(f(t)):{},s(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),k=t=>s(i({},\"__esModule\",{value:!0}),t);var l=w((F,c)=>{c.exports=_jsx_runtime});var _={};v(_,{default:()=>p,frontmatter:()=>x});var n=y(l()),x=void 0;function d(t){let e={code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...t.components},{EpicVideo:o,InlineFile:a}=e;return o||h(\"EpicVideo\",!0),a||h(\"InlineFile\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Form Action\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/form-action\"}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F9DD}\\u200D\\u2642\\uFE0F I've added some backend code that will handle our form submission. It's at\n`,(0,n.jsx)(e.code,{children:\"api/onboarding\"}),\". You can find it in \",(0,n.jsx)(a,{file:\"api.server.ts\"}),\".\"]}),`\n`,(0,n.jsx)(\"callout-info\",{children:(0,n.jsxs)(e.p,{children:[\"Note: the \",(0,n.jsx)(e.code,{children:\"api.server.ts\"}),` file is some magic from the Workshop app to make it\nso we can test things out with a backend server without having to actually set\nup a backend server. It's not something you'd use in a real app.`]})}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Great! So we want the user's form submission to be sent along to\n`,(0,n.jsx)(e.code,{children:\"api/onboarding\"}),`. By default, when a form is submitted, the browser will send\nthe form data to the current page's URL. We can change this by adding an\n`,(0,n.jsx)(e.code,{children:\"action\"}),\" attribute to the form element:\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"form\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"action\"}),\"=\",'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"path/to/backend/route\"}),'\"',\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Go ahead and add an \",(0,n.jsx)(e.code,{children:\"action\"}),\" attribute to the form element.\"]}),`\n`,(0,n.jsx)(\"callout-info\",{children:(0,n.jsx)(e.p,{children:`\\u{1F989} You may notice a full page refresh when you submit the form. We'll talk\nabout this in a future step.`})})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}function h(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(_);})();\n;return Component;",[914],"https://www.epicreact.dev/workshops/react-fundamentals/form-action",{"_9":885,"_886":916,"_888":917},"/app/07.02.problem/test/",[918,890],"action.test.ts",{"_9":885,"_886":920},"/app/07.02.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/07.forms/02.problem.action?view=editor&title=Form+Action+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":219,"_342":741,"_863":923,"_22":220,"_24":221,"_865":924,"_880":925,"_883":927,"_891":930,"_894":932,"_466":467,"_477":510,"_9":580,"_908":-5},"02.solution.action","var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},s=(e,t,n,a)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of f(t))!x.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(a=p(t,r))||a.enumerable});return e};var g=(e,t,n)=>(n=e!=null?m(l(e)):{},s(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>s(i({},\"__esModule\",{value:!0}),e);var d=w((v,c)=>{c.exports=_jsx_runtime});var M={};_(M,{default:()=>u,frontmatter:()=>E});var o=g(d()),E=void 0;function h(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||b(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Form Action\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/form-action/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Super! Now we're submitting the data to that endpoint. The default behavior\nof the form is to make a GET request which sends the data in the URL search\nparams. We'll change it in the near future.`})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}function b(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(M);})();\n;return Component;",[926],"https://www.epicreact.dev/workshops/react-fundamentals/form-action/solution",{"_9":885,"_886":928,"_888":929},"/app/07.02.solution/test/",[918,890],{"_9":885,"_886":931},"/app/07.02.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/07.forms/02.solution.action?view=editor&title=Form+Action+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_477":540,"_475":934,"_580":945},{"_20":223,"_342":743,"_863":935,"_22":224,"_24":225,"_865":936,"_880":937,"_883":939,"_891":942,"_894":944,"_466":467,"_477":540,"_9":475,"_896":227},"03.problem.types","var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var o in e)s(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!w.call(t,r)&&r!==o&&s(t,r,{get:()=>e[r],enumerable:!(i=h(e,r))||i.enumerable});return t};var _=(t,e,o)=>(o=t!=null?u(m(t)):{},a(e||!t||!t.__esModule?s(o,\"default\",{value:t,enumerable:!0}):o,t)),g=t=>a(s({},\"__esModule\",{value:!0}),t);var c=y((M,d)=>{d.exports=_jsx_runtime});var k={};x(k,{default:()=>l,frontmatter:()=>b});var n=_(c()),b=void 0;function p(t){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||j(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Input Types\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/input-types\"}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} We need quite a few more fields. Luckily the web platform has some great\ninput types we can use. \\u{1F4DC} Check out all the\n`,(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types\",children:[\"standard \",(0,n.jsx)(e.code,{children:\"\"}),\" types here\"]}),\".\"]}),`\n`,(0,n.jsx)(e.p,{children:`For us, we need to add types for the password, photo, favorite color, and start\ndate. Please add inputs for those fields.`}),`\n`,(0,n.jsx)(\"callout-info\",{children:(0,n.jsx)(e.p,{children:`\\u{1F989} You may notice a full page refresh when you submit the form. We'll talk\nabout this in a future step.`})})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(p,{...t})}):p(t)}function j(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(k);})();\n;return Component;",[938],"https://www.epicreact.dev/workshops/react-fundamentals/input-types",{"_9":885,"_886":940,"_888":941},"/app/07.03.problem/test/",[918,890],{"_9":885,"_886":943},"/app/07.03.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/07.forms/03.problem.types?view=editor&title=Input+Types+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":227,"_342":743,"_863":946,"_22":228,"_24":229,"_865":947,"_880":948,"_883":950,"_891":953,"_894":955,"_466":467,"_477":540,"_9":580,"_908":-5},"03.solution.types","var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},a=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!w.call(t,r)&&r!==n&&s(t,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return t};var b=(t,e,n)=>(n=t!=null?d(f(t)):{},a(e||!t||!t.__esModule?s(n,\"default\",{value:t,enumerable:!0}):n,t)),g=t=>a(s({},\"__esModule\",{value:!0}),t);var h=y((E,l)=>{l.exports=_jsx_runtime});var v={};x(v,{default:()=>u,frontmatter:()=>_});var o=b(h()),_=void 0;function c(t){let e={a:\"a\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||j(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Input Types\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/input-types/solution\"}),`\n`,(0,o.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great! Now our users will have more fields available to them as they're\nfilling out this form. But there's something weird going on with the form\nsubmission so let's look at that next.`}),`\n`,(0,o.jsxs)(e.p,{children:[`\\u{1F989} While the web platform has a lot of really great input types, not all of them\nmatch the style you're going for in your app. And these can be difficult (or in\nsome cases even impossible) to style. There are efforts in standards bodies to\nsolve these problems, but until then, you should look into great UI libraries\nlike `,(0,o.jsx)(e.a,{href:\"https://www.radix-ui.com/\",children:\"Radix-UI\"}),` and\n`,(0,o.jsx)(e.a,{href:\"https://react-spectrum.adobe.com/react-aria\",children:\"React Aria Components\"}),` which\nhandle these issues and allow you to customize the style much more easily.`]})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(c,{...t})}):c(t)}function j(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(v);})();\n;return Component;",[949],"https://www.epicreact.dev/workshops/react-fundamentals/input-types/solution",{"_9":885,"_886":951,"_888":952},"/app/07.03.solution/test/",[918,890],{"_9":885,"_886":954},"/app/07.03.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/07.forms/03.solution.types?view=editor&title=Input+Types+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_477":476,"_475":957,"_580":970},{"_20":231,"_342":745,"_863":958,"_22":232,"_24":233,"_865":959,"_880":960,"_883":962,"_891":967,"_894":969,"_466":467,"_477":476,"_9":475,"_896":235},"04.problem.submit","var Component=(()=>{var b=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),w=(a,e)=>{for(var r in e)l(a,r,{get:e[r],enumerable:!0})},s=(a,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of m(e))!f.call(a,t)&&t!==r&&l(a,t,{get:()=>e[t],enumerable:!(o=u(e,t))||o.enumerable});return a};var g=(a,e,r)=>(r=a!=null?b(y(a)):{},s(e||!a||!a.__esModule?l(r,\"default\",{value:a,enumerable:!0}):r,a)),k=a=>s(l({},\"__esModule\",{value:!0}),a);var c=v((E,i)=>{i.exports=_jsx_runtime});var N={};w(N,{default:()=>p,frontmatter:()=>T});var n=g(c()),T=void 0;function h(a){let e={a:\"a\",code:\"code\",h1:\"h1\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",span:\"span\",...a.components},{EpicVideo:r,InlineFile:o}=e;return r||d(\"EpicVideo\",!0),o||d(\"InlineFile\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Submission\"}),`\n`,(0,n.jsx)(r,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/submission\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F428} For this exercise, I want you to read through these instructions and complete\nthings step by step as you read the instructions so you can observe the changes\nas they come. There aren't a lot of steps, but it's important you understand\neach one.`}),`\n`,(0,n.jsx)(\"callout-info\",{children:(0,n.jsxs)(e.p,{children:[\"I recommend opening \",(0,n.jsx)(e.a,{href:\"/app/playground\",children:\"the playground\"}),` in a new tab so you can\nopen the `,(0,n.jsx)(e.a,{href:\"https://developer.chrome.com/docs/devtools/network\",children:\"network tab\"}),\".\"]})}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Right now, when we submit the form, we get a full page refresh and what we\nentered ends up in the URL. This is the default behavior of forms. This works\nwell for a search page, but it's certainly not optimal for a form like this one\nfor two reasons:`}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:`We don't want to see the data in the URL (like the password) as that can\nappear in logs, be saved in the browser history, and is visible to anyone\nlooking over our shoulder.`}),`\n`,(0,n.jsx)(e.li,{children:`We generally don't want a full-page refresh as that can be jarring to the\nuser and forces the browser to re-evaluate all our client-side JavaScript.`}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To handle the first problem, let's switch to using \",(0,n.jsx)(e.code,{children:\"POST\"}),` instead of the default\nform HTTP `,(0,n.jsx)(e.code,{children:\"method\"}),\" (which is \",(0,n.jsx)(e.code,{children:\"GET\"}),`). This will send the data in the body of the\nrequest instead of in the URL:`]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"form\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"action\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"api/onboarding\"}),'\"',\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"method\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"POST\"}),'\"',\">\",`\n`]})})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u{1F428} Go ahead and make that change now, then come on back for the rest...\"}),`\n`,(0,n.jsxs)(e.p,{children:[`Now, when you submit the form, you'll notice we get an error because\nour `,(0,n.jsx)(o,{file:\"api.server.ts\"}),\" file does not handle the \",(0,n.jsx)(e.code,{children:\"POST\"}),` request\nyet.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To fix this, go to \",(0,n.jsx)(o,{file:\"api.server.ts\"}),` and follow the\ninstructions in there to handle non-`,(0,n.jsx)(e.code,{children:\"GET\"}),` requests. You'll notice we need to\nswitch from using search params to using `,(0,n.jsx)(e.code,{children:\"request.formData()\"}),` to get the form\nsubmission. This is because the body of the request is not a query string, but\nrather an `,(0,n.jsx)(e.code,{children:\"application/x-www-form-urlencoded\"}),\" request.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u{1F428} Ok, now I want you to submit the form again. Make sure you include a photo.\"}),`\n`,(0,n.jsx)(e.p,{children:`You should notice that it shows the photo's filename rather than showing the\nfile you uploaded. Why is this?`}),`\n`,(0,n.jsxs)(e.p,{children:[`I want you to check the network tab in your dev tools and see what the request\nlooks like because we have a third problem. You'll notice that the\n`,(0,n.jsx)(e.code,{children:\"Content-Type\"}),\" header is \",(0,n.jsx)(e.code,{children:\"application/x-www-form-urlencoded\"}),` and the body of the\nrequest is a query string. This is the default behavior of forms and it's a fine\ndefault for simple forms.`]}),`\n`,(0,n.jsx)(e.p,{children:`The problem for us is we're trying to upload a file which cannot be reasonably\nrepresented by a string in the URL (especially for large files). The file is\nsimply represented by its name, and that is all the server will get which is\njust not very useful to the server.`}),`\n`,(0,n.jsxs)(e.p,{children:[\"We can change that by adding a \",(0,n.jsx)(e.code,{children:'encType=\"multipart/form-data\"'}),` attribute to the\nform. This will change the `,(0,n.jsx)(e.code,{children:\"Content-Type\"}),\" header to \",(0,n.jsx)(e.code,{children:\"multipart/form-data\"}),` and\nthe body of the request will be a `,(0,n.jsx)(e.code,{children:\"multipart/form-data\"}),` request. This is the\nsame type of request that you'd get if you were uploading a file which is what\nwe're doing with the photo.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F428} Now, update the \",(0,n.jsx)(e.code,{children:\"form\"}),\" to have the appropriate \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#enctype\",children:(0,n.jsx)(e.code,{children:\"enctype\"})}),` attribute for file\nuploads:`]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"form\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"action\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"api/onboarding\"}),'\"',`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"method\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"POST\"}),'\"',`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"encType\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"multipart/form-data\"}),'\"',`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\">\",`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:`Great, so now if you check the network tab you'll find that the file is\nactually uploaded properly.`}),`\n`,(0,n.jsxs)(e.p,{children:[`Now let's get to the full page refresh issue. The only way to solve this is by\nhandling the form submission through JavaScript and preventing the built-in\nbrowser behavior. In a real application, you would want to make sure your server\ncan handle those form submissions (for\n`,(0,n.jsx)(e.a,{href:\"https://www.youtube.com/watch?v=EzLGleT1yrY&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf\",children:\"progressive enhancement\"}),`\nreasons). But you'll also want to still prevent default to avoid the full-page\nrefresh.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"This is where the \",(0,n.jsx)(e.a,{href:\"https://remix.run\",children:\"Remix\"}),` web framework comes in to handle\nall that for you. But in this React-focused workshop, we're not going to cover\nthat in detail.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"So instead of continuing with our \",(0,n.jsx)(o,{file:\"api.server.ts\"}),` file,\nwe're going to add an `,(0,n.jsx)(e.code,{children:\"onSubmit\"}),` handler to the form to handle the form\nsubmission in JavaScript and prevent the browser's default behavior.`]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"form\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"action\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"api/onboarding\"}),'\"',`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"method\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"POST\"}),'\"',`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"encType\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"multipart/form-data\"}),'\"',`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onSubmit\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"preventDefault\"}),\"()\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// ...\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t}\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\">\",`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:\"\\u{1F428} Go ahead and make that change now, then come on back for the rest...\"}),`\n`,(0,n.jsxs)(e.p,{children:[`Now you shouldn't be getting a full-page refresh (and you'll also not be getting\nthe form submission either). So now, we just need to get the form data and log\nthat out. To do that, we'll use\n`,(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/FormData\",children:[\"the \",(0,n.jsx)(e.code,{children:\"FormData\"}),\" API\"]}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"form\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"currentTarget\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"formData\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"FormData\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"form\"}),\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// The browser doesn't display form values very well when you console.log(formData)\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// so you can do this:\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"console\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"log\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"Object\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fromEntries\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"formData\"}),\"))\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// this will create an object out of the properties in the formData so you can\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// more easily see what's in there. Keep in mind that formData can have multiple\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// values for a single key, so you don't generally want to rely on this method\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// for production code.\"}),`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[`You can get the form from the submit event via\n`,(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget\",children:(0,n.jsx)(e.code,{children:\"event.currentTarget\"})}),\".\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u{1F428} Go ahead and make that change now, then come on back for the rest...\"}),`\n`,(0,n.jsx)(e.p,{children:`Now, when you submit the form, you should see the form data logged out to the\nconsole. You can also check the network tab to see that the form submission is\nnot happening so we're not getting an error and there is no refresh.`}),`\n`,(0,n.jsx)(e.p,{children:\"Great work!\"})]})}function p(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(h,{...a})}):h(a)}function d(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(N);})();\n;return Component;",[961],"https://www.epicreact.dev/workshops/react-fundamentals/submission",{"_9":885,"_886":963,"_888":964},"/app/07.04.problem/test/",[918,965,890,966],"api.test.ts","submit.test.ts",{"_9":885,"_886":968},"/app/07.04.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/07.forms/04.problem.submit?view=editor&title=Submission+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":235,"_342":745,"_863":971,"_22":236,"_24":237,"_865":972,"_880":973,"_883":975,"_891":978,"_894":980,"_466":467,"_477":476,"_9":580,"_908":-5},"04.solution.submit","var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),w=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},c=(e,t,o,r)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let s of f(t))!x.call(e,s)&&s!==o&&i(e,s,{get:()=>t[s],enumerable:!(r=p(t,s))||r.enumerable});return e};var _=(e,t,o)=>(o=e!=null?m(l(e)):{},c(t||!e||!e.__esModule?i(o,\"default\",{value:e,enumerable:!0}):o,e)),b=e=>c(i({},\"__esModule\",{value:!0}),e);var a=g((v,d)=>{d.exports=_jsx_runtime});var M={};w(M,{default:()=>h,frontmatter:()=>j});var n=_(a()),j=void 0;function u(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=t;return o||E(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:\"Submission\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/submission/solution\"}),`\n`,(0,n.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great work! There's a lot more to form submissions on the server side of\nthings, but this will get us going to handling the UI side of this with React,\nso good job.`})]})}function h(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}function E(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(M);})();\n;return Component;",[974],"https://www.epicreact.dev/workshops/react-fundamentals/submission/solution",{"_9":885,"_886":976,"_888":977},"/app/07.04.solution/test/",[918,965,890,966],{"_9":885,"_886":979},"/app/07.04.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/07.forms/04.solution.submit?view=editor&title=Submission+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_477":620,"_475":982,"_580":993},{"_20":239,"_342":747,"_863":983,"_22":240,"_24":241,"_865":984,"_880":985,"_883":987,"_891":990,"_894":992,"_466":467,"_477":620,"_9":475,"_896":243},"05.problem.action","var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var o in e)r(n,o,{get:e[o],enumerable:!0})},i=(n,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!x.call(n,c)&&c!==o&&r(n,c,{get:()=>e[c],enumerable:!(a=f(e,c))||a.enumerable});return n};var _=(n,e,o)=>(o=n!=null?p(m(n)):{},i(e||!n||!n.__esModule?r(o,\"default\",{value:n,enumerable:!0}):o,n)),j=n=>i(r({},\"__esModule\",{value:!0}),n);var s=w((v,d)=>{d.exports=_jsx_runtime});var M={};g(M,{default:()=>l,frontmatter:()=>b});var t=_(s()),b=void 0;function h(n){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:o}=e;return o||y(\"EpicVideo\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Form Actions\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/form-actions\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} \",(0,t.jsx)(e.code,{children:\"onSubmit\"}),` handlers that prevent default and handle file uploads like this\nare so common that React has a built-in way to do that! The `,(0,t.jsx)(e.code,{children:\"action\"}),` prop on a\nform can accept a function! The function accepts a `,(0,t.jsx)(e.code,{children:\"formData\"}),\" object.\"]}),`\n`,(0,t.jsx)(\"callout-warning\",{class:\"aside\",children:(0,t.jsx)(e.p,{children:`Note that in HTML, attributes cannot accept functions. The action prop\naccepting a function is a React feature.`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this exercise, create a function for logging the \",(0,t.jsx)(e.code,{children:\"formData\"}),` like we are\ncurrently and delete all the superfluous props.`]}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u{1F4DC} \",(0,t.jsxs)(e.a,{href:\"https://react.dev/reference/react-dom/components/form\",children:[(0,t.jsx)(e.code,{children:\"\"}),\" React docs\"]})]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}function y(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(M);})();\n;return Component;",[986],"https://www.epicreact.dev/workshops/react-fundamentals/form-actions",{"_9":885,"_886":988,"_888":989},"/app/07.05.problem/test/",[918,890],{"_9":885,"_886":991},"/app/07.05.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/07.forms/05.problem.action?view=editor&title=Form+Actions+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":243,"_342":747,"_863":994,"_22":244,"_24":245,"_865":995,"_880":996,"_883":998,"_891":1001,"_894":1003,"_466":467,"_477":620,"_9":580,"_908":-5},"05.solution.action","var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var _=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),w=(e,n)=>{for(var t in n)i(e,t,{get:n[t],enumerable:!0})},c=(e,n,t,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of h(n))!x.call(e,r)&&r!==t&&i(e,r,{get:()=>n[r],enumerable:!(s=u(n,r))||s.enumerable});return e};var j=(e,n,t)=>(t=e!=null?p(l(e)):{},c(n||!e||!e.__esModule?i(t,\"default\",{value:e,enumerable:!0}):t,e)),g=e=>c(i({},\"__esModule\",{value:!0}),e);var d=_((v,a)=>{a.exports=_jsx_runtime});var M={};w(M,{default:()=>f,frontmatter:()=>y});var o=j(d()),y=void 0;function m(e){let n={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:t}=n;return t||E(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{children:\"Form Actions\"}),`\n`,(0,o.jsx)(t,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/form-actions/solution\"}),`\n`,(0,o.jsx)(n.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Nice! This is a handy feature from React for handling form submissions via\nthe client.`})]})}function f(e={}){let{wrapper:n}=e.components||{};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}function E(e,n){throw new Error(\"Expected \"+(n?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(M);})();\n;return Component;",[997],"https://www.epicreact.dev/workshops/react-fundamentals/form-actions/solution",{"_9":885,"_886":999,"_888":1000},"/app/07.05.solution/test/",[918,890],{"_9":885,"_886":1002},"/app/07.05.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/07.forms/05.solution.action?view=editor&title=Form+Actions+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",[1005,1010,1015,1020,1025],{"_20":207,"_342":739,"_863":878,"_22":208,"_24":209,"_865":879,"_880":1006,"_883":1007,"_891":1009,"_894":895,"_466":467,"_477":509,"_9":475,"_896":211},[882],{"_9":885,"_886":887,"_888":1008},[890],{"_9":885,"_886":893},{"_20":215,"_342":741,"_863":911,"_22":216,"_24":217,"_865":912,"_880":1011,"_883":1012,"_891":1014,"_894":921,"_466":467,"_477":510,"_9":475,"_896":219},[914],{"_9":885,"_886":916,"_888":1013},[918,890],{"_9":885,"_886":920},{"_20":223,"_342":743,"_863":935,"_22":224,"_24":225,"_865":936,"_880":1016,"_883":1017,"_891":1019,"_894":944,"_466":467,"_477":540,"_9":475,"_896":227},[938],{"_9":885,"_886":940,"_888":1018},[918,890],{"_9":885,"_886":943},{"_20":231,"_342":745,"_863":958,"_22":232,"_24":233,"_865":959,"_880":1021,"_883":1022,"_891":1024,"_894":969,"_466":467,"_477":476,"_9":475,"_896":235},[961],{"_9":885,"_886":963,"_888":1023},[918,965,890,966],{"_9":885,"_886":968},{"_20":239,"_342":747,"_863":983,"_22":240,"_24":241,"_865":984,"_880":1026,"_883":1027,"_891":1029,"_894":992,"_466":467,"_477":620,"_9":475,"_896":243},[986],{"_9":885,"_886":988,"_888":1028},[918,890],{"_9":885,"_886":991},[1031,1036,1041,1046,1051],{"_20":211,"_342":739,"_863":898,"_22":212,"_24":213,"_865":899,"_880":1032,"_883":1033,"_891":1035,"_894":907,"_466":467,"_477":509,"_9":580,"_908":-5},[901],{"_9":885,"_886":903,"_888":1034},[890],{"_9":885,"_886":906},{"_20":219,"_342":741,"_863":923,"_22":220,"_24":221,"_865":924,"_880":1037,"_883":1038,"_891":1040,"_894":932,"_466":467,"_477":510,"_9":580,"_908":-5},[926],{"_9":885,"_886":928,"_888":1039},[918,890],{"_9":885,"_886":931},{"_20":227,"_342":743,"_863":946,"_22":228,"_24":229,"_865":947,"_880":1042,"_883":1043,"_891":1045,"_894":955,"_466":467,"_477":540,"_9":580,"_908":-5},[949],{"_9":885,"_886":951,"_888":1044},[918,890],{"_9":885,"_886":954},{"_20":235,"_342":745,"_863":971,"_22":236,"_24":237,"_865":972,"_880":1047,"_883":1048,"_891":1050,"_894":980,"_466":467,"_477":476,"_9":580,"_908":-5},[974],{"_9":885,"_886":976,"_888":1049},[918,965,890,966],{"_9":885,"_886":979},{"_20":243,"_342":747,"_863":994,"_22":244,"_24":245,"_865":995,"_880":1052,"_883":1053,"_891":1055,"_894":1003,"_466":467,"_477":620,"_9":580,"_908":-5},[997],{"_9":885,"_886":999,"_888":1054},[918,890],{"_9":885,"_886":1002},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=React%20Fundamentals%20%E2%9A%9B&entry.428900931=Forms","epicVideoInfosPromise",["P",1059],"exerciseFinished",{"_1062":1063,"_24":1064},"file","/myapp/workshop-content/exercises/07.forms/FINISHED.mdx","exercises/07.forms/FINISHED.mdx","prevStepLink",{"_1067":1068,"_1069":1070},"to","/exercise/07/05/solution","aria-label","Form Actions (solution)","nextStepLink",{"_1067":1073,"_1069":771},"/exercise/08","actionData","errors"]

07. Forms/Elaboration