\"}),`\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;",[905],"https://www.epicreact.dev/workshops/react-fundamentals/props",{"_9":829,"_830":907,"_832":908},"/app/04.04.problem/test/",[834],{"_9":829,"_830":910},"/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":597,"_807":913,"_22":132,"_24":133,"_809":914,"_824":915,"_827":917,"_836":920,"_839":922,"_465":493,"_467":493,"_9":464,"_853":-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;",[916],"https://www.epicreact.dev/workshops/react-fundamentals/props/solution",{"_9":829,"_830":918,"_832":919},"/app/04.04.solution/test/",[834],{"_9":829,"_830":921},"/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",[924,929,934,939],{"_20":103,"_342":591,"_807":822,"_22":104,"_24":105,"_809":823,"_824":925,"_827":926,"_836":928,"_839":840,"_465":493,"_467":468,"_9":477,"_841":107},[826],{"_9":829,"_830":831,"_832":927},[834,835],{"_9":829,"_830":838},{"_20":111,"_342":593,"_807":856,"_22":112,"_24":113,"_809":857,"_824":930,"_827":931,"_836":933,"_839":865,"_465":493,"_467":487,"_9":477,"_841":115},[859],{"_9":829,"_830":861,"_832":932},[834,835],{"_9":829,"_830":864},{"_20":119,"_342":595,"_807":879,"_22":120,"_24":121,"_809":880,"_824":935,"_827":936,"_836":938,"_839":888,"_465":493,"_467":500,"_9":477,"_841":123},[882],{"_9":829,"_830":884,"_832":937},[834,835],{"_9":829,"_830":887},{"_20":127,"_342":597,"_807":902,"_22":128,"_24":129,"_809":903,"_824":940,"_827":941,"_836":943,"_839":911,"_465":493,"_467":493,"_9":477,"_841":131},[905],{"_9":829,"_830":907,"_832":942},[834],{"_9":829,"_830":910},[945,950,955,960],{"_20":107,"_342":591,"_807":843,"_22":108,"_24":109,"_809":844,"_824":946,"_827":947,"_836":949,"_839":852,"_465":493,"_467":468,"_9":464,"_853":-5},[846],{"_9":829,"_830":848,"_832":948},[834,835],{"_9":829,"_830":851},{"_20":115,"_342":593,"_807":867,"_22":116,"_24":117,"_809":868,"_824":951,"_827":952,"_836":954,"_839":876,"_465":493,"_467":487,"_9":464,"_853":-5},[870],{"_9":829,"_830":872,"_832":953},[834,835],{"_9":829,"_830":875},{"_20":123,"_342":595,"_807":890,"_22":124,"_24":125,"_809":891,"_824":956,"_827":957,"_836":959,"_839":899,"_465":493,"_467":500,"_9":464,"_853":-5},[893],{"_9":829,"_830":895,"_832":958},[834,835],{"_9":829,"_830":898},{"_20":131,"_342":597,"_807":913,"_22":132,"_24":133,"_809":914,"_824":961,"_827":962,"_836":964,"_839":922,"_465":493,"_467":493,"_9":464,"_853":-5},[916],{"_9":829,"_830":918,"_832":963},[834],{"_9":829,"_830":921},"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",968],"exerciseFinished",{"_971":972,"_24":973},"file","/myapp/workshop-content/exercises/04.components/FINISHED.mdx","exercises/04.components/FINISHED.mdx","prevStepLink",{"_976":977,"_978":979},"to","/exercise/04/04/solution","aria-label","Props (solution)","nextStepLink",{"_976":982,"_978":617},"/exercise/05","actionData","errors"]

04. Custom Components/Elaboration