\"}),`\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(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}function k(r,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+r+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return x(E);})();\n;return Component;",[558],"https://www.epicreact.dev/tutorials/get-started-with-react/props",{"_9":482,"_483":560,"_485":561},"/app/04.04.problem/test/",[487],{"_9":482,"_483":563},"/app/04.04.problem/","https://stackblitz.com/github/epicweb-dev/get-started-with-react/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,"_142":431,"_460":566,"_22":132,"_24":133,"_462":567,"_477":568,"_480":570,"_489":573,"_492":575,"_265":325,"_277":325,"_9":275,"_506":-5},"04.solution.props","var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!x.call(t,r)&&r!==n&&s(t,r,{get:()=>e[r],enumerable:!(i=l(e,r))||i.enumerable});return t};var g=(t,e,n)=>(n=t!=null?m(h(t)):{},c(e||!t||!t.__esModule?s(n,\"default\",{value:t,enumerable:!0}):n,t)),j=t=>c(s({},\"__esModule\",{value:!0}),t);var d=w((X,a)=>{a.exports=_jsx_runtime});var M={};_(M,{default:()=>u,frontmatter:()=>y});var o=g(d()),y=void 0;function p(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||E(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Props\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/tutorials/get-started-with-react/props/solution\"}),`\n`,(0,o.jsx)(e.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(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(p,{...t})}):p(t)}function E(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(M);})();\n;return Component;",[569],"https://www.epicreact.dev/tutorials/get-started-with-react/props/solution",{"_9":482,"_483":571,"_485":572},"/app/04.04.solution/test/",[487],{"_9":482,"_483":574},"/app/04.04.solution/","https://stackblitz.com/github/epicweb-dev/get-started-with-react/tree/main/exercises/04.components/04.solution.props?view=editor&title=Props+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html",[577,582,587,592],{"_20":103,"_142":425,"_460":475,"_22":104,"_24":105,"_462":476,"_477":578,"_480":579,"_489":581,"_492":493,"_265":325,"_277":276,"_9":285,"_494":107},[479],{"_9":482,"_483":484,"_485":580},[487,488],{"_9":482,"_483":491},{"_20":111,"_142":427,"_460":509,"_22":112,"_24":113,"_462":510,"_477":583,"_480":584,"_489":586,"_492":518,"_265":325,"_277":286,"_9":285,"_494":115},[512],{"_9":482,"_483":514,"_485":585},[487,488],{"_9":482,"_483":517},{"_20":119,"_142":429,"_460":532,"_22":120,"_24":121,"_462":533,"_477":588,"_480":589,"_489":591,"_492":541,"_265":325,"_277":266,"_9":285,"_494":123},[535],{"_9":482,"_483":537,"_485":590},[487,488],{"_9":482,"_483":540},{"_20":127,"_142":431,"_460":555,"_22":128,"_24":129,"_462":556,"_477":593,"_480":594,"_489":596,"_492":564,"_265":325,"_277":325,"_9":285,"_494":131},[558],{"_9":482,"_483":560,"_485":595},[487],{"_9":482,"_483":563},[598,603,608,613],{"_20":107,"_142":425,"_460":496,"_22":108,"_24":109,"_462":497,"_477":599,"_480":600,"_489":602,"_492":505,"_265":325,"_277":276,"_9":275,"_506":-5},[499],{"_9":482,"_483":501,"_485":601},[487,488],{"_9":482,"_483":504},{"_20":115,"_142":427,"_460":520,"_22":116,"_24":117,"_462":521,"_477":604,"_480":605,"_489":607,"_492":529,"_265":325,"_277":286,"_9":275,"_506":-5},[523],{"_9":482,"_483":525,"_485":606},[487,488],{"_9":482,"_483":528},{"_20":123,"_142":429,"_460":543,"_22":124,"_24":125,"_462":544,"_477":609,"_480":610,"_489":612,"_492":552,"_265":325,"_277":266,"_9":275,"_506":-5},[546],{"_9":482,"_483":548,"_485":611},[487,488],{"_9":482,"_483":551},{"_20":131,"_142":431,"_460":566,"_22":132,"_24":133,"_462":567,"_477":614,"_480":615,"_489":617,"_492":575,"_265":325,"_277":325,"_9":275,"_506":-5},[569],{"_9":482,"_483":571,"_485":616},[487],{"_9":482,"_483":574},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=Get%20Started%20with%20React%20%F0%9F%8F%83%E2%80%8D%E2%9E%A1%EF%B8%8F&entry.428900931=Custom%20Components","epicVideoInfosPromise",["P",621],"exerciseFinished",{"_624":625,"_24":626},"file","/myapp/workshop-content/exercises/04.components/FINISHED.mdx","exercises/04.components/FINISHED.mdx","prevStepLink",{"_629":630,"_631":632},"to","/exercise/04/04/solution","aria-label","Props (solution)","nextStepLink",{"_629":635,"_631":636},"/finished","Finished! 🎉","actionData","errors"]

04. Custom Components/Elaboration