var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var m=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),f=(l,e)=>{for(var n in e)s(l,n,{get:e[n],enumerable:!0})},t=(l,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of u(e))!y.call(l,r)&&r!==n&&s(l,r,{get:()=>e[r],enumerable:!(o=b(e,r))||o.enumerable});return l};var w=(l,e,n)=>(n=l!=null?p(v(l)):{},t(e||!l||!l.__esModule?s(n,"default",{value:l,enumerable:!0}):n,l)),D=l=>t(s({},"__esModule",{value:!0}),l);var i=m((B,c)=>{c.exports=_jsx_runtime});var E={};f(E,{default:()=>h,frontmatter:()=>k});var a=w(i()),k=void 0;function d(l){let e={a:"a",code:"code",h1:"h1",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...l.components},{EpicVideo:n}=e;return n||g("EpicVideo",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:"Default Value"}),` `,(0,a.jsx)(n,{url:"https://www.epicreact.dev/workshops/react-fundamentals/default-value"}),` `,(0,a.jsxs)(e.p,{children:["\u{1F989} You may have noticed in the previous step we used a ",(0,a.jsx)(e.code,{children:"value"}),` prop. This is how you set the value in an HTML document. React however is a little special and supports what's called `,(0,a.jsx)(e.a,{href:"https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable",children:'"controlled inputs"'}),` meaning you can programmatically control the value of the input.`]}),` `,(0,a.jsxs)(e.p,{children:["For this reason, when you set the ",(0,a.jsx)(e.code,{children:"value"}),` prop on an input like this, it means that React will expect you keep that value up-to-date and will not allow the user to change the value to anything other than what you have specified in the `,(0,a.jsx)(e.code,{children:"value"})," prop. Effectively, this means that if we set the ",(0,a.jsx)(e.code,{children:"value"}),` on one of our fields, the user can't change it unless we do a little extra work. This is a very useful feature we'll discuss more later on, but it has implications for our form now, so let's address this.`]}),` `,(0,a.jsxs)(e.p,{children:[`The thing is, we want to default several of these fields to a value, but we want the user to be able to change them. With the exception of the hidden input, we can't do that with the `,(0,a.jsx)(e.code,{children:"value"})," prop. So we need to use a different prop."]}),` `,(0,a.jsxs)(e.p,{children:["In React, you use the ",(0,a.jsx)(e.code,{children:"defaultValue"}),` prop to set the default value of an input and the `,(0,a.jsx)(e.code,{children:"defaultChecked"}),` prop to set the default value of a checkbox or radio. The `,(0,a.jsx)(e.code,{children:"defaultValue"}),` should be a string (or it will be coerced to a string) that matches the format of the input.`]}),` `,(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:"input"})," ",(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"}),'"'," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"defaultValue"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"Hello World"}),'"'," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"// these give the same result:"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:["<",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"input"})," ",(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:"number"}),'"'," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"defaultValue"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"42"}),'"'," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:["<",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"input"})," ",(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:"number"}),'"'," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"defaultValue"}),(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(--base09)"},children:"42"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]})]})}),` `,(0,a.jsxs)(e.p,{children:[`If it's a date, you need to use a string, but it needs to be in the format `,(0,a.jsx)(e.code,{children:"YYYY-MM-DD"}),` (because that's the format of the value when the user selects a date). You can use the `,(0,a.jsx)(e.code,{children:"toISOString"})," method on a ",(0,a.jsx)(e.code,{children:"Date"}),` object which gives a string with the format `,(0,a.jsx)(e.code,{children:"YYYY-MM-DDTHH:mm:ss.sssZ"}),", so we can use ",(0,a.jsx)(e.code,{children:"slice"}),` to get the first 10 characters:`]}),` `,(0,a.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,a.jsx)(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:"input"})," ",(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:"date"}),'"'," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"defaultValue"}),(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(--base0E)"},children:"new"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"Date"}),"().",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"toISOString"}),"().",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"slice"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base09)"},children:"0"}),", ",(0,a.jsx)(e.span,{style:{color:"var(--base09)"},children:"10"}),")",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]})})}),` `,(0,a.jsxs)(e.p,{children:["This applies to ",(0,a.jsx)(e.code,{children:"select"}),` as well. Set it the the value of the option you want to have selected, and that one will be selected by default:`]}),` `,(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:"select"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"defaultValue"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"pineapple"}),'"',">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"option"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"value"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"apple"}),'"',">Apple",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"option"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"value"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"banana"}),'"',">Banana",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"option"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"value"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"pineapple"}),'"',">Pineapple",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:["",` `]})]})}),` `,(0,a.jsxs)(e.p,{children:["Checkboxes and Radios are special cases. For these, you set the ",(0,a.jsx)(e.code,{children:"defaultChecked"}),` prop:`]}),` `,(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:"input"})," ",(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:"checkbox"}),'"'," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"defaultChecked"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"// and for the radio, just set defaultChecked on the one you want selected:"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:["<",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"input"})," ",(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:"radio"}),'"'," ",(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:"fruit"}),'"'," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"value"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"apple"}),'"'," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"defaultChecked"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:["<",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"input"})," ",(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:"radio"}),'"'," ",(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:"fruit"}),'"'," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"value"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"banana"}),'"'," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:["<",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"input"})," ",(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:"radio"}),'"'," ",(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:"fruit"}),'"'," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"value"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"pineapple"}),'"'," />",` `]})]})}),` `,(0,a.jsx)(e.p,{children:"\u{1F468}\u200D\u{1F4BC} So with that, please set some defaults on these form fields:"}),` `,(0,a.jsxs)(e.ul,{children:[` `,(0,a.jsx)(e.li,{children:'Account Type: "Student"'}),` `,(0,a.jsx)(e.li,{children:"Age: 18"}),` `,(0,a.jsx)(e.li,{children:"Favorite Color: #002E5D"}),` `,(0,a.jsx)(e.li,{children:"Visibility: Public"}),` `,(0,a.jsx)(e.li,{children:"Waiver Signed: Checked"}),` `,(0,a.jsx)(e.li,{children:"Start Date: Today's date"}),` `]})]})}function h(l={}){let{wrapper:e}=l.components||{};return e?(0,a.jsx)(e,{...l,children:(0,a.jsx)(d,{...l})}):d(l)}function g(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return D(E);})(); ;return Component;

08. Inputs/Elaboration