\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"//

\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"//     1 + 2 = 3\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"//

\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"//

\"}),`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:\"Let's get some more practice with custom components.\"})]})}function p(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function w(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(E);})();\n;return Component;",[937],"https://www.epicreact.dev/workshops/react-fundamentals/props",{"_9":861,"_862":939,"_864":940},"/app/04.04.problem/test/",[866],{"_9":861,"_862":942},"/app/04.04.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/04.components/04.problem.props?view=editor&title=Props+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html",{"_20":131,"_342":629,"_839":945,"_22":132,"_24":133,"_841":946,"_856":947,"_859":949,"_868":952,"_871":954,"_466":537,"_468":537,"_9":478,"_885":-5},"04.solution.props","var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var h=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)s(e,n,{get:t[n],enumerable:!0})},i=(e,t,n,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of l(t))!x.call(e,r)&&r!==n&&s(e,r,{get:()=>t[r],enumerable:!(c=f(t,r))||c.enumerable});return e};var j=(e,t,n)=>(n=e!=null?m(h(e)):{},i(t||!e||!e.__esModule?s(n,\"default\",{value:e,enumerable:!0}):n,e)),g=e=>i(s({},\"__esModule\",{value:!0}),e);var d=w((v,a)=>{a.exports=_jsx_runtime});var M={};_(M,{default:()=>u,frontmatter:()=>y});var o=j(d()),y=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||E(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Props\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/props/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great work! Now you have a solid understanding of how React treats JSX and\ncustom components! Well done.`})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(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 g(M);})();\n;return Component;",[948],"https://www.epicreact.dev/workshops/react-fundamentals/props/solution",{"_9":861,"_862":950,"_864":951},"/app/04.04.solution/test/",[866],{"_9":861,"_862":953},"/app/04.04.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/04.components/04.solution.props?view=editor&title=Props+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html",[956,961,966,971],{"_20":103,"_342":623,"_839":854,"_22":104,"_24":105,"_841":855,"_856":957,"_859":958,"_868":960,"_871":872,"_466":537,"_468":469,"_9":465,"_873":107},[858],{"_9":861,"_862":863,"_864":959},[866,867],{"_9":861,"_862":870},{"_20":111,"_342":625,"_839":888,"_22":112,"_24":113,"_841":889,"_856":962,"_859":963,"_868":965,"_871":897,"_466":537,"_468":467,"_9":465,"_873":115},[891],{"_9":861,"_862":893,"_864":964},[866,867],{"_9":861,"_862":896},{"_20":119,"_342":627,"_839":911,"_22":120,"_24":121,"_841":912,"_856":967,"_859":968,"_868":970,"_871":920,"_466":537,"_468":480,"_9":465,"_873":123},[914],{"_9":861,"_862":916,"_864":969},[866,867],{"_9":861,"_862":919},{"_20":127,"_342":629,"_839":934,"_22":128,"_24":129,"_841":935,"_856":972,"_859":973,"_868":975,"_871":943,"_466":537,"_468":537,"_9":465,"_873":131},[937],{"_9":861,"_862":939,"_864":974},[866],{"_9":861,"_862":942},[977,982,987,992],{"_20":107,"_342":623,"_839":875,"_22":108,"_24":109,"_841":876,"_856":978,"_859":979,"_868":981,"_871":884,"_466":537,"_468":469,"_9":478,"_885":-5},[878],{"_9":861,"_862":880,"_864":980},[866,867],{"_9":861,"_862":883},{"_20":115,"_342":625,"_839":899,"_22":116,"_24":117,"_841":900,"_856":983,"_859":984,"_868":986,"_871":908,"_466":537,"_468":467,"_9":478,"_885":-5},[902],{"_9":861,"_862":904,"_864":985},[866,867],{"_9":861,"_862":907},{"_20":123,"_342":627,"_839":922,"_22":124,"_24":125,"_841":923,"_856":988,"_859":989,"_868":991,"_871":931,"_466":537,"_468":480,"_9":478,"_885":-5},[925],{"_9":861,"_862":927,"_864":990},[866,867],{"_9":861,"_862":930},{"_20":131,"_342":629,"_839":945,"_22":132,"_24":133,"_841":946,"_856":993,"_859":994,"_868":996,"_871":954,"_466":537,"_468":537,"_9":478,"_885":-5},[948],{"_9":861,"_862":950,"_864":995},[866],{"_9":861,"_862":953},"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=Custom%20Components","epicVideoInfosPromise",["P",1000],"exerciseFinished",{"_1003":1004,"_24":1005},"file","/myapp/workshop-content/exercises/04.components/FINISHED.mdx","exercises/04.components/FINISHED.mdx","prevStepLink",{"_1008":1009,"_1010":1011},"to","/exercise/04/04/solution","aria-label","Props (solution)","nextStepLink",{"_1008":1014,"_1010":649},"/exercise/05","actionData","errors"]

04. Custom Components/Elaboration