\"}),`\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;",[1096],"https://www.epicreact.dev/workshops/react-fundamentals/props",{"_9":1020,"_1021":1098,"_1023":1099},"/app/04.04.problem/test/",[1025],{"_9":1020,"_1021":1101},"/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":786,"_998":1104,"_22":132,"_24":133,"_1000":1105,"_1015":1106,"_1018":1108,"_1027":1111,"_1030":1113,"_467":525,"_469":525,"_9":583,"_1044":-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;",[1107],"https://www.epicreact.dev/workshops/react-fundamentals/props/solution",{"_9":1020,"_1021":1109,"_1023":1110},"/app/04.04.solution/test/",[1025],{"_9":1020,"_1021":1112},"/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",[1115,1120,1125,1130],{"_20":103,"_342":780,"_998":1013,"_22":104,"_24":105,"_1000":1014,"_1015":1116,"_1018":1117,"_1027":1119,"_1030":1031,"_467":525,"_469":468,"_9":466,"_1032":107},[1017],{"_9":1020,"_1021":1022,"_1023":1118},[1025,1026],{"_9":1020,"_1021":1029},{"_20":111,"_342":782,"_998":1047,"_22":112,"_24":113,"_1000":1048,"_1015":1121,"_1018":1122,"_1027":1124,"_1030":1056,"_467":525,"_469":508,"_9":466,"_1032":115},[1050],{"_9":1020,"_1021":1052,"_1023":1123},[1025,1026],{"_9":1020,"_1021":1055},{"_20":119,"_342":784,"_998":1070,"_22":120,"_24":121,"_1000":1071,"_1015":1126,"_1018":1127,"_1027":1129,"_1030":1079,"_467":525,"_469":516,"_9":466,"_1032":123},[1073],{"_9":1020,"_1021":1075,"_1023":1128},[1025,1026],{"_9":1020,"_1021":1078},{"_20":127,"_342":786,"_998":1093,"_22":128,"_24":129,"_1000":1094,"_1015":1131,"_1018":1132,"_1027":1134,"_1030":1102,"_467":525,"_469":525,"_9":466,"_1032":131},[1096],{"_9":1020,"_1021":1098,"_1023":1133},[1025],{"_9":1020,"_1021":1101},[1136,1141,1146,1151],{"_20":107,"_342":780,"_998":1034,"_22":108,"_24":109,"_1000":1035,"_1015":1137,"_1018":1138,"_1027":1140,"_1030":1043,"_467":525,"_469":468,"_9":583,"_1044":-5},[1037],{"_9":1020,"_1021":1039,"_1023":1139},[1025,1026],{"_9":1020,"_1021":1042},{"_20":115,"_342":782,"_998":1058,"_22":116,"_24":117,"_1000":1059,"_1015":1142,"_1018":1143,"_1027":1145,"_1030":1067,"_467":525,"_469":508,"_9":583,"_1044":-5},[1061],{"_9":1020,"_1021":1063,"_1023":1144},[1025,1026],{"_9":1020,"_1021":1066},{"_20":123,"_342":784,"_998":1081,"_22":124,"_24":125,"_1000":1082,"_1015":1147,"_1018":1148,"_1027":1150,"_1030":1090,"_467":525,"_469":516,"_9":583,"_1044":-5},[1084],{"_9":1020,"_1021":1086,"_1023":1149},[1025,1026],{"_9":1020,"_1021":1089},{"_20":131,"_342":786,"_998":1104,"_22":132,"_24":133,"_1000":1105,"_1015":1152,"_1018":1153,"_1027":1155,"_1030":1113,"_467":525,"_469":525,"_9":583,"_1044":-5},[1107],{"_9":1020,"_1021":1109,"_1023":1154},[1025],{"_9":1020,"_1021":1112},"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",1159],"exerciseFinished",{"_1162":1163,"_24":1164},"file","/myapp/workshop-content/exercises/04.components/FINISHED.mdx","exercises/04.components/FINISHED.mdx","prevStepLink",{"_1167":1168,"_1169":1170},"to","/exercise/04/04/solution","aria-label","Props (solution)","nextStepLink",{"_1167":1173,"_1169":806},"/exercise/05","actionData","errors"]

04. Custom Components/Elaboration