[{"_1":2,"_1078":-5,"_1079":-5},"loaderData",{"_3":4,"_569":570,"_863":864},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_334":335,"_337":338,"_339":16,"_340":341,"_398":343,"_399":345,"_346":347,"_400":401,"_422":423,"_447":-5,"_448":-5,"_449":450},"userId",{"_7":8,"_9":10},"id","251422dd-5639-450f-b914-01ca042d681d","type","cookie.randomId","preferences","progress",[],"user","userHasAccess",false,"apps",[19,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322,326,330],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.js-hello-world/01.problem.hello","relativePath","exercises/01.js-hello-world/01.problem.hello",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.js-hello-world/01.solution.hello","exercises/01.js-hello-world/01.solution.hello",{"_20":31,"_22":32,"_24":33},"01.02.problem","/myapp/workshop-content/exercises/01.js-hello-world/02.problem.root","exercises/01.js-hello-world/02.problem.root",{"_20":35,"_22":36,"_24":37},"01.02.solution","/myapp/workshop-content/exercises/01.js-hello-world/02.solution.root","exercises/01.js-hello-world/02.solution.root",{"_20":39,"_22":40,"_24":41},"02.01.problem","/myapp/workshop-content/exercises/02.raw-react/01.problem.elements","exercises/02.raw-react/01.problem.elements",{"_20":43,"_22":44,"_24":45},"02.01.solution","/myapp/workshop-content/exercises/02.raw-react/01.solution.elements","exercises/02.raw-react/01.solution.elements",{"_20":47,"_22":48,"_24":49},"02.02.problem","/myapp/workshop-content/exercises/02.raw-react/02.problem.nesting","exercises/02.raw-react/02.problem.nesting",{"_20":51,"_22":52,"_24":53},"02.02.solution","/myapp/workshop-content/exercises/02.raw-react/02.solution.nesting","exercises/02.raw-react/02.solution.nesting",{"_20":55,"_22":56,"_24":57},"02.03.problem","/myapp/workshop-content/exercises/02.raw-react/03.problem.deep-nesting","exercises/02.raw-react/03.problem.deep-nesting",{"_20":59,"_22":60,"_24":61},"02.03.solution","/myapp/workshop-content/exercises/02.raw-react/03.solution.deep-nesting","exercises/02.raw-react/03.solution.deep-nesting",{"_20":63,"_22":64,"_24":65},"03.01.problem","/myapp/workshop-content/exercises/03.using-jsx/01.problem.compiler","exercises/03.using-jsx/01.problem.compiler",{"_20":67,"_22":68,"_24":69},"03.01.solution","/myapp/workshop-content/exercises/03.using-jsx/01.solution.compiler","exercises/03.using-jsx/01.solution.compiler",{"_20":71,"_22":72,"_24":73},"03.02.problem","/myapp/workshop-content/exercises/03.using-jsx/02.problem.interpolation","exercises/03.using-jsx/02.problem.interpolation",{"_20":75,"_22":76,"_24":77},"03.02.solution","/myapp/workshop-content/exercises/03.using-jsx/02.solution.interpolation","exercises/03.using-jsx/02.solution.interpolation",{"_20":79,"_22":80,"_24":81},"03.03.problem","/myapp/workshop-content/exercises/03.using-jsx/03.problem.spread","exercises/03.using-jsx/03.problem.spread",{"_20":83,"_22":84,"_24":85},"03.03.solution","/myapp/workshop-content/exercises/03.using-jsx/03.solution.spread","exercises/03.using-jsx/03.solution.spread",{"_20":87,"_22":88,"_24":89},"03.04.problem","/myapp/workshop-content/exercises/03.using-jsx/04.problem.nesting","exercises/03.using-jsx/04.problem.nesting",{"_20":91,"_22":92,"_24":93},"03.04.solution","/myapp/workshop-content/exercises/03.using-jsx/04.solution.nesting","exercises/03.using-jsx/04.solution.nesting",{"_20":95,"_22":96,"_24":97},"03.05.problem","/myapp/workshop-content/exercises/03.using-jsx/05.problem.fragments","exercises/03.using-jsx/05.problem.fragments",{"_20":99,"_22":100,"_24":101},"03.05.solution","/myapp/workshop-content/exercises/03.using-jsx/05.solution.fragments","exercises/03.using-jsx/05.solution.fragments",{"_20":103,"_22":104,"_24":105},"04.01.problem","/myapp/workshop-content/exercises/04.components/01.problem.function","exercises/04.components/01.problem.function",{"_20":107,"_22":108,"_24":109},"04.01.solution","/myapp/workshop-content/exercises/04.components/01.solution.function","exercises/04.components/01.solution.function",{"_20":111,"_22":112,"_24":113},"04.02.problem","/myapp/workshop-content/exercises/04.components/02.problem.raw","exercises/04.components/02.problem.raw",{"_20":115,"_22":116,"_24":117},"04.02.solution","/myapp/workshop-content/exercises/04.components/02.solution.raw","exercises/04.components/02.solution.raw",{"_20":119,"_22":120,"_24":121},"04.03.problem","/myapp/workshop-content/exercises/04.components/03.problem.jsx","exercises/04.components/03.problem.jsx",{"_20":123,"_22":124,"_24":125},"04.03.solution","/myapp/workshop-content/exercises/04.components/03.solution.jsx","exercises/04.components/03.solution.jsx",{"_20":127,"_22":128,"_24":129},"04.04.problem","/myapp/workshop-content/exercises/04.components/04.problem.props","exercises/04.components/04.problem.props",{"_20":131,"_22":132,"_24":133},"04.04.solution","/myapp/workshop-content/exercises/04.components/04.solution.props","exercises/04.components/04.solution.props",{"_20":135,"_22":136,"_24":137},"05.01.problem","/myapp/workshop-content/exercises/05.typescript/01.problem.props","exercises/05.typescript/01.problem.props",{"_20":139,"_22":140,"_24":141},"05.01.solution","/myapp/workshop-content/exercises/05.typescript/01.solution.props","exercises/05.typescript/01.solution.props",{"_20":143,"_22":144,"_24":145},"05.02.problem","/myapp/workshop-content/exercises/05.typescript/02.problem.narrow","exercises/05.typescript/02.problem.narrow",{"_20":147,"_22":148,"_24":149},"05.02.solution","/myapp/workshop-content/exercises/05.typescript/02.solution.narrow","exercises/05.typescript/02.solution.narrow",{"_20":151,"_22":152,"_24":153},"05.03.problem","/myapp/workshop-content/exercises/05.typescript/03.problem.derive","exercises/05.typescript/03.problem.derive",{"_20":155,"_22":156,"_24":157},"05.03.solution","/myapp/workshop-content/exercises/05.typescript/03.solution.derive","exercises/05.typescript/03.solution.derive",{"_20":159,"_22":160,"_24":161},"05.04.problem","/myapp/workshop-content/exercises/05.typescript/04.problem.default-props","exercises/05.typescript/04.problem.default-props",{"_20":163,"_22":164,"_24":165},"05.04.solution","/myapp/workshop-content/exercises/05.typescript/04.solution.default-props","exercises/05.typescript/04.solution.default-props",{"_20":167,"_22":168,"_24":169},"05.05.problem","/myapp/workshop-content/exercises/05.typescript/05.problem.function-types","exercises/05.typescript/05.problem.function-types",{"_20":171,"_22":172,"_24":173},"05.05.solution","/myapp/workshop-content/exercises/05.typescript/05.solution.function-types","exercises/05.typescript/05.solution.function-types",{"_20":175,"_22":176,"_24":177},"05.06.problem","/myapp/workshop-content/exercises/05.typescript/06.problem.satisfies","exercises/05.typescript/06.problem.satisfies",{"_20":179,"_22":180,"_24":181},"05.06.solution","/myapp/workshop-content/exercises/05.typescript/06.solution.satisfies","exercises/05.typescript/06.solution.satisfies",{"_20":183,"_22":184,"_24":185},"06.01.problem","/myapp/workshop-content/exercises/06.styling/01.problem.style","exercises/06.styling/01.problem.style",{"_20":187,"_22":188,"_24":189},"06.01.solution","/myapp/workshop-content/exercises/06.styling/01.solution.style","exercises/06.styling/01.solution.style",{"_20":191,"_22":192,"_24":193},"06.02.problem","/myapp/workshop-content/exercises/06.styling/02.problem.component","exercises/06.styling/02.problem.component",{"_20":195,"_22":196,"_24":197},"06.02.solution","/myapp/workshop-content/exercises/06.styling/02.solution.component","exercises/06.styling/02.solution.component",{"_20":199,"_22":200,"_24":201},"06.03.problem","/myapp/workshop-content/exercises/06.styling/03.problem.size-prop","exercises/06.styling/03.problem.size-prop",{"_20":203,"_22":204,"_24":205},"06.03.solution","/myapp/workshop-content/exercises/06.styling/03.solution.size-prop","exercises/06.styling/03.solution.size-prop",{"_20":207,"_22":208,"_24":209},"07.01.problem","/myapp/workshop-content/exercises/07.forms/01.problem.form","exercises/07.forms/01.problem.form",{"_20":211,"_22":212,"_24":213},"07.01.solution","/myapp/workshop-content/exercises/07.forms/01.solution.form","exercises/07.forms/01.solution.form",{"_20":215,"_22":216,"_24":217},"07.02.problem","/myapp/workshop-content/exercises/07.forms/02.problem.action","exercises/07.forms/02.problem.action",{"_20":219,"_22":220,"_24":221},"07.02.solution","/myapp/workshop-content/exercises/07.forms/02.solution.action","exercises/07.forms/02.solution.action",{"_20":223,"_22":224,"_24":225},"07.03.problem","/myapp/workshop-content/exercises/07.forms/03.problem.types","exercises/07.forms/03.problem.types",{"_20":227,"_22":228,"_24":229},"07.03.solution","/myapp/workshop-content/exercises/07.forms/03.solution.types","exercises/07.forms/03.solution.types",{"_20":231,"_22":232,"_24":233},"07.04.problem","/myapp/workshop-content/exercises/07.forms/04.problem.submit","exercises/07.forms/04.problem.submit",{"_20":235,"_22":236,"_24":237},"07.04.solution","/myapp/workshop-content/exercises/07.forms/04.solution.submit","exercises/07.forms/04.solution.submit",{"_20":239,"_22":240,"_24":241},"07.05.problem","/myapp/workshop-content/exercises/07.forms/05.problem.action","exercises/07.forms/05.problem.action",{"_20":243,"_22":244,"_24":245},"07.05.solution","/myapp/workshop-content/exercises/07.forms/05.solution.action","exercises/07.forms/05.solution.action",{"_20":247,"_22":248,"_24":249},"08.01.problem","/myapp/workshop-content/exercises/08.inputs/01.problem.checkbox","exercises/08.inputs/01.problem.checkbox",{"_20":251,"_22":252,"_24":253},"08.01.solution","/myapp/workshop-content/exercises/08.inputs/01.solution.checkbox","exercises/08.inputs/01.solution.checkbox",{"_20":255,"_22":256,"_24":257},"08.02.problem","/myapp/workshop-content/exercises/08.inputs/02.problem.select","exercises/08.inputs/02.problem.select",{"_20":259,"_22":260,"_24":261},"08.02.solution","/myapp/workshop-content/exercises/08.inputs/02.solution.select","exercises/08.inputs/02.solution.select",{"_20":263,"_22":264,"_24":265},"08.03.problem","/myapp/workshop-content/exercises/08.inputs/03.problem.radio","exercises/08.inputs/03.problem.radio",{"_20":267,"_22":268,"_24":269},"08.03.solution","/myapp/workshop-content/exercises/08.inputs/03.solution.radio","exercises/08.inputs/03.solution.radio",{"_20":271,"_22":272,"_24":273},"08.04.problem","/myapp/workshop-content/exercises/08.inputs/04.problem.hidden","exercises/08.inputs/04.problem.hidden",{"_20":275,"_22":276,"_24":277},"08.04.solution","/myapp/workshop-content/exercises/08.inputs/04.solution.hidden","exercises/08.inputs/04.solution.hidden",{"_20":279,"_22":280,"_24":281},"08.05.problem","/myapp/workshop-content/exercises/08.inputs/05.problem.default-value","exercises/08.inputs/05.problem.default-value",{"_20":283,"_22":284,"_24":285},"08.05.solution","/myapp/workshop-content/exercises/08.inputs/05.solution.default-value","exercises/08.inputs/05.solution.default-value",{"_20":287,"_22":288,"_24":289},"09.01.problem","/myapp/workshop-content/exercises/09.errors/01.problem.composition","exercises/09.errors/01.problem.composition",{"_20":291,"_22":292,"_24":293},"09.01.solution","/myapp/workshop-content/exercises/09.errors/01.solution.composition","exercises/09.errors/01.solution.composition",{"_20":295,"_22":296,"_24":297},"09.02.problem","/myapp/workshop-content/exercises/09.errors/02.problem.show-boundary","exercises/09.errors/02.problem.show-boundary",{"_20":299,"_22":300,"_24":301},"09.02.solution","/myapp/workshop-content/exercises/09.errors/02.solution.show-boundary","exercises/09.errors/02.solution.show-boundary",{"_20":303,"_22":304,"_24":305},"09.03.problem","/myapp/workshop-content/exercises/09.errors/03.problem.reset","exercises/09.errors/03.problem.reset",{"_20":307,"_22":308,"_24":309},"09.03.solution","/myapp/workshop-content/exercises/09.errors/03.solution.reset","exercises/09.errors/03.solution.reset",{"_20":311,"_22":312,"_24":313},"10.01.problem","/myapp/workshop-content/exercises/10.arrays/01.problem.key-prop","exercises/10.arrays/01.problem.key-prop",{"_20":315,"_22":316,"_24":317},"10.01.solution","/myapp/workshop-content/exercises/10.arrays/01.solution.key-prop","exercises/10.arrays/01.solution.key-prop",{"_20":319,"_22":320,"_24":321},"10.02.problem","/myapp/workshop-content/exercises/10.arrays/02.problem.focus-state","exercises/10.arrays/02.problem.focus-state",{"_20":323,"_22":324,"_24":325},"10.02.solution","/myapp/workshop-content/exercises/10.arrays/02.solution.focus-state","exercises/10.arrays/02.solution.focus-state",{"_20":327,"_22":328,"_24":329},"10.03.problem","/myapp/workshop-content/exercises/10.arrays/03.problem.key-reset","exercises/10.arrays/03.problem.key-reset",{"_20":331,"_22":332,"_24":333},"10.03.solution","/myapp/workshop-content/exercises/10.arrays/03.solution.key-reset","exercises/10.arrays/03.solution.key-reset","repoUpdates",{"_336":16},"updatesAvailable","unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_342":343,"_344":345,"_346":347,"_353":354,"_371":372,"_374":375,"_376":377,"_378":379,"_382":383,"_388":389,"_392":393,"_394":395,"_396":397},"title","React Fundamentals ⚛","subtitle","Learn the foundational concepts necessary for building React applications and libraries","instructor",{"_20":348,"_349":350,"_351":352},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-fundamentals","discordChannelId","1285244676286189569","discordTags",[369,370],"1285246046498328627","1285245484432228375","onboardingVideo",[373],"https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/react-fundamentals","githubRoot","https://github.com/epicweb-dev/react-fundamentals/tree/main","stackBlitzConfig",{"_380":381},"view","editor","forms",{"_384":385,"_386":387},"workshop","https://docs.google.com/forms/d/e/1FAIpQLSdRmj9p8-5zyoqRzxp3UpqSbC3aFkweXvvJIKes0a5s894gzg/viewform?hl=en&embedded=true&entry.2123647600={workshopTitle}","exercise","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234={workshopTitle}&entry.428900931={exerciseTitle}","testTab",{"_390":391},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_402":403,"_404":405,"_406":407,"_408":375,"_409":377,"_410":391,"_411":412,"_413":414,"_415":416,"_417":391,"_418":419,"_420":421},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_WORKSHOP_INSTANCE_ID","4e1570b81d1baf3d16bd3a08ece570cb","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","6.43.0","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","89f381ec2c4e40606a57aac73ab7aa0103bca969a3ea4610d30b0c9088a3b547","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_424":425,"_426":427,"_428":429,"_430":431,"_432":431,"_433":434,"_441":442,"_443":444,"_445":393,"_446":391},"protocol","http:","hostname","fundamentals.epicreact.dev","port","","origin","http://fundamentals.epicreact.dev","domain","hints",{"_435":436,"_437":438,"_439":440},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/08/finished","session",{"_435":-5},"separator","online","toast","confettiId","presence",{"_451":452},"users",[453,471,480,488,496,505,512,520,530,539,546,552,559,564],{"_7":454,"_455":391,"_456":457,"_458":459,"_20":460,"_461":462},"fa20292f-ae7d-4a77-94bb-34de5ec41cf3","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/a796f5ac5e2bf7568ef48cc35acea706?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/a796f5ac5e2bf7568ef48cc35acea706?size=512&default=identicon","Adrián Pereira Guerra","location",{"_398":463,"_430":464,"_386":465},"Advanced React APIs 🔥","http://localhost:5639",{"_9":466,"_467":468,"_469":470},"solution","exerciseNumber",2,"stepNumber",1,{"_7":472,"_455":391,"_456":473,"_458":474,"_20":475,"_461":476},"9f9b1e24-eec2-4c41-a2fe-c3d14d5887f5","https://www.gravatar.com/avatar/e820b62dc64616f4501da1070f203255?size=64&default=identicon","https://www.gravatar.com/avatar/e820b62dc64616f4501da1070f203255?size=512&default=identicon","KLARA ROEHRL",{"_398":343,"_430":464,"_386":477},{"_9":478,"_467":479,"_469":470},"problem",10,{"_7":481,"_455":391,"_456":482,"_458":483,"_20":484,"_461":485},"247b6dba-3749-41e9-8c74-5783d467e5cc","https://www.gravatar.com/avatar/f9863012b1ac1886a6b0c8b20198332c?size=64&default=identicon","https://www.gravatar.com/avatar/f9863012b1ac1886a6b0c8b20198332c?size=512&default=identicon","Geoff Cheah",{"_398":343,"_430":464,"_386":486},{"_9":466,"_467":487,"_469":468},3,{"_7":489,"_455":391,"_456":490,"_458":491,"_20":492,"_461":493},"10cd35da-438a-45c7-afef-adeeba59e6c5","https://www.gravatar.com/avatar/fa8a744d534777ce00f10fb665079788?size=64&default=identicon","https://www.gravatar.com/avatar/fa8a744d534777ce00f10fb665079788?size=512&default=identicon","Nithin Amin",{"_398":494,"_430":464,"_386":495},"React Hooks 🎣",{"_467":468},{"_7":497,"_455":391,"_456":498,"_458":499,"_20":500,"_461":501},"ae27c3f4-c4b7-46bd-8a63-3a1dfa8c4c6a","https://www.gravatar.com/avatar/5ef620e42108c6e3b753861b95a87190?size=64&default=identicon","https://www.gravatar.com/avatar/5ef620e42108c6e3b753861b95a87190?size=512&default=identicon","Sriram Balasubramanian",{"_398":502,"_430":503,"_386":504},"MCP Auth 🔐","http://localhost:5640",{"_9":466,"_467":470,"_469":487},{"_7":506,"_455":391,"_456":507,"_458":508,"_20":509,"_461":510},"160375fa-432c-4683-b7af-3ba9ea6117ab","https://avatars.githubusercontent.com/u/30752178?v=4&size=64","https://avatars.githubusercontent.com/u/30752178?v=4&size=512","Dmitriy",{"_398":463,"_430":464,"_386":511},{"_467":470},{"_7":513,"_455":391,"_456":514,"_458":515,"_20":516,"_461":517},"1c7280fe-b2ca-4416-9d2e-11e4fa91e655","https://cdn.discordapp.com/avatars/603759289391382556/8c5277b23a4e81afd524afce2dc19dc2.png?size=64","https://cdn.discordapp.com/avatars/603759289391382556/8c5277b23a4e81afd524afce2dc19dc2.png?size=512","Lenin",{"_398":518,"_430":464,"_386":519},"Advanced React Patterns 🤯",{"_9":466,"_467":470,"_469":470},{"_7":521,"_455":391,"_456":522,"_458":523,"_20":524,"_461":525},"44d8a511-9a06-4d88-96dc-b84ca2f72107","https://www.gravatar.com/avatar/f7a07b4554d38bbb0e515d48413f7f97?size=64&default=identicon","https://www.gravatar.com/avatar/f7a07b4554d38bbb0e515d48413f7f97?size=512&default=identicon","yinm",{"_398":526,"_430":464,"_386":527},"React Server Components 🤹",{"_9":478,"_467":528,"_469":529},4,5,{"_7":531,"_455":391,"_456":532,"_458":533,"_20":534,"_461":535},"0ed80f6b-1025-4301-879c-0a3e14961785","https://www.gravatar.com/avatar/3ef755b4f196cd7933278e83e3236b09?size=64&default=identicon","https://www.gravatar.com/avatar/3ef755b4f196cd7933278e83e3236b09?size=512&default=identicon","Bartłomiej Wiejak",{"_398":536,"_430":464,"_386":537},"Web Authentication 🔐",{"_9":478,"_467":538,"_469":468},6,{"_7":540,"_455":391,"_456":541,"_458":542,"_20":543,"_461":544},"1ed6475e-0783-41f4-b299-a79cb2385afd","https://cdn.discordapp.com/avatars/967212265780695060/df3f7a57b065045df6e76ad883a912b7.png?size=64","https://cdn.discordapp.com/avatars/967212265780695060/df3f7a57b065045df6e76ad883a912b7.png?size=512","James Ball",{"_398":343,"_430":464,"_386":545},{"_467":538},{"_7":547,"_455":391,"_456":548,"_458":549,"_20":550,"_461":551},"53af5c12-618e-4928-ab83-2e53da2ca436","https://www.gravatar.com/avatar/63a8d1266b0f772f3fcbfa2f8270890f?size=64&default=identicon","https://www.gravatar.com/avatar/63a8d1266b0f772f3fcbfa2f8270890f?size=512&default=identicon","Karol",{"_398":343,"_430":464},{"_7":553,"_455":391,"_456":554,"_458":555,"_20":556,"_461":557},"c9426556-a946-4b98-bb33-b97f1eb4d0e8","https://www.gravatar.com/avatar/71253d6e2618b5de04c8f813b3b08d58?size=64&default=identicon","https://www.gravatar.com/avatar/71253d6e2618b5de04c8f813b3b08d58?size=512&default=identicon","Alexandru Popa",{"_398":494,"_430":464,"_386":558},{"_9":478,"_467":470,"_469":470},{"_7":560,"_461":561},"2ac5295f-4408-49e9-9291-c2b9087f7fa5",{"_398":494,"_430":562,"_386":563},"http://hooks.epicreact.dev",{"_467":468},{"_7":565,"_461":566},"db39e25c-95df-4fbc-aed8-b9d4e97433df",{"_398":343,"_430":431,"_386":567},{"_467":568,"_469":-5,"_9":-5},8,"routes/_app+/_layout",{"_398":343,"_571":572,"_859":860,"_862":16},"exercises",[573,592,615,650,679,719,741,777,812,836],{"_467":470,"_342":574,"_575":576,"_580":581,"_584":585},"Hello World in JS","solutions",[577,578],{"_469":470,"_342":574,"_20":27},{"_469":468,"_342":579,"_20":35},"Generate the Root Node","problems",[582,583],{"_469":470,"_342":574,"_20":21},{"_469":468,"_342":579,"_20":31},"steps",[586,589],{"_469":470,"_342":574,"_20":21,"_478":587,"_466":588},{"_20":21,"_342":574},{"_20":27,"_342":574},{"_469":468,"_342":579,"_20":31,"_478":590,"_466":591},{"_20":31,"_342":579},{"_20":35,"_342":579},{"_467":468,"_342":593,"_575":594,"_580":601,"_584":605},"Raw React APIs",[595,597,599],{"_469":470,"_342":596,"_20":43},"Create React Elements",{"_469":468,"_342":598,"_20":51},"Nesting Elements",{"_469":487,"_342":600,"_20":59},"Deep Nesting Elements",[602,603,604],{"_469":470,"_342":596,"_20":39},{"_469":468,"_342":598,"_20":47},{"_469":487,"_342":600,"_20":55},[606,609,612],{"_469":470,"_342":596,"_20":39,"_478":607,"_466":608},{"_20":39,"_342":596},{"_20":43,"_342":596},{"_469":468,"_342":598,"_20":47,"_478":610,"_466":611},{"_20":47,"_342":598},{"_20":51,"_342":598},{"_469":487,"_342":600,"_20":55,"_478":613,"_466":614},{"_20":55,"_342":600},{"_20":59,"_342":600},{"_467":487,"_342":616,"_575":617,"_580":628,"_584":634},"Using JSX",[618,620,622,624,626],{"_469":470,"_342":619,"_20":67},"Compiling JSX",{"_469":468,"_342":621,"_20":75},"Interpolation",{"_469":487,"_342":623,"_20":83},"Spread props",{"_469":528,"_342":625,"_20":91},"Nesting JSX",{"_469":529,"_342":627,"_20":99},"Fragments",[629,630,631,632,633],{"_469":470,"_342":619,"_20":63},{"_469":468,"_342":621,"_20":71},{"_469":487,"_342":623,"_20":79},{"_469":528,"_342":625,"_20":87},{"_469":529,"_342":627,"_20":95},[635,638,641,644,647],{"_469":470,"_342":619,"_20":63,"_478":636,"_466":637},{"_20":63,"_342":619},{"_20":67,"_342":619},{"_469":468,"_342":621,"_20":71,"_478":639,"_466":640},{"_20":71,"_342":621},{"_20":75,"_342":621},{"_469":487,"_342":623,"_20":79,"_478":642,"_466":643},{"_20":79,"_342":623},{"_20":83,"_342":623},{"_469":528,"_342":625,"_20":87,"_478":645,"_466":646},{"_20":87,"_342":625},{"_20":91,"_342":625},{"_469":529,"_342":627,"_20":95,"_478":648,"_466":649},{"_20":95,"_342":627},{"_20":99,"_342":627},{"_467":528,"_342":651,"_575":652,"_580":661,"_584":666},"Custom Components",[653,655,657,659],{"_469":470,"_342":654,"_20":107},"Simple Function",{"_469":468,"_342":656,"_20":115},"Raw API",{"_469":487,"_342":658,"_20":123},"JSX Components",{"_469":528,"_342":660,"_20":131},"Props",[662,663,664,665],{"_469":470,"_342":654,"_20":103},{"_469":468,"_342":656,"_20":111},{"_469":487,"_342":658,"_20":119},{"_469":528,"_342":660,"_20":127},[667,670,673,676],{"_469":470,"_342":654,"_20":103,"_478":668,"_466":669},{"_20":103,"_342":654},{"_20":107,"_342":654},{"_469":468,"_342":656,"_20":111,"_478":671,"_466":672},{"_20":111,"_342":656},{"_20":115,"_342":656},{"_469":487,"_342":658,"_20":119,"_478":674,"_466":675},{"_20":119,"_342":658},{"_20":123,"_342":658},{"_469":528,"_342":660,"_20":127,"_478":677,"_466":678},{"_20":127,"_342":660},{"_20":131,"_342":660},{"_467":529,"_342":680,"_575":681,"_580":693,"_584":700},"TypeScript",[682,683,685,687,689,691],{"_469":470,"_342":660,"_20":139},{"_469":468,"_342":684,"_20":147},"Narrow Types",{"_469":487,"_342":686,"_20":155},"Derive Types",{"_469":528,"_342":688,"_20":163},"Default Props",{"_469":529,"_342":690,"_20":171},"Reduce Duplication",{"_469":538,"_342":692,"_20":179},"Satisfies",[694,695,696,697,698,699],{"_469":470,"_342":660,"_20":135},{"_469":468,"_342":684,"_20":143},{"_469":487,"_342":686,"_20":151},{"_469":528,"_342":688,"_20":159},{"_469":529,"_342":690,"_20":167},{"_469":538,"_342":692,"_20":175},[701,704,707,710,713,716],{"_469":470,"_342":660,"_20":135,"_478":702,"_466":703},{"_20":135,"_342":660},{"_20":139,"_342":660},{"_469":468,"_342":684,"_20":143,"_478":705,"_466":706},{"_20":143,"_342":684},{"_20":147,"_342":684},{"_469":487,"_342":686,"_20":151,"_478":708,"_466":709},{"_20":151,"_342":686},{"_20":155,"_342":686},{"_469":528,"_342":688,"_20":159,"_478":711,"_466":712},{"_20":159,"_342":688},{"_20":163,"_342":688},{"_469":529,"_342":690,"_20":167,"_478":714,"_466":715},{"_20":167,"_342":690},{"_20":171,"_342":690},{"_469":538,"_342":692,"_20":175,"_478":717,"_466":718},{"_20":175,"_342":692},{"_20":179,"_342":692},{"_467":538,"_342":720,"_575":721,"_580":727,"_584":731},"Styling",[722,723,725],{"_469":470,"_342":720,"_20":187},{"_469":468,"_342":724,"_20":195},"Custom Component",{"_469":487,"_342":726,"_20":203},"Size Prop",[728,729,730],{"_469":470,"_342":720,"_20":183},{"_469":468,"_342":724,"_20":191},{"_469":487,"_342":726,"_20":199},[732,735,738],{"_469":470,"_342":720,"_20":183,"_478":733,"_466":734},{"_20":183,"_342":720},{"_20":187,"_342":720},{"_469":468,"_342":724,"_20":191,"_478":736,"_466":737},{"_20":191,"_342":724},{"_20":195,"_342":724},{"_469":487,"_342":726,"_20":199,"_478":739,"_466":740},{"_20":199,"_342":726},{"_20":203,"_342":726},{"_467":742,"_342":743,"_575":744,"_580":755,"_584":761},7,"Forms",[745,747,749,751,753],{"_469":470,"_342":746,"_20":211},"Form",{"_469":468,"_342":748,"_20":219},"Form Action",{"_469":487,"_342":750,"_20":227},"Input Types",{"_469":528,"_342":752,"_20":235},"Submission",{"_469":529,"_342":754,"_20":243},"Form Actions",[756,757,758,759,760],{"_469":470,"_342":746,"_20":207},{"_469":468,"_342":748,"_20":215},{"_469":487,"_342":750,"_20":223},{"_469":528,"_342":752,"_20":231},{"_469":529,"_342":754,"_20":239},[762,765,768,771,774],{"_469":470,"_342":746,"_20":207,"_478":763,"_466":764},{"_20":207,"_342":746},{"_20":211,"_342":746},{"_469":468,"_342":748,"_20":215,"_478":766,"_466":767},{"_20":215,"_342":748},{"_20":219,"_342":748},{"_469":487,"_342":750,"_20":223,"_478":769,"_466":770},{"_20":223,"_342":750},{"_20":227,"_342":750},{"_469":528,"_342":752,"_20":231,"_478":772,"_466":773},{"_20":231,"_342":752},{"_20":235,"_342":752},{"_469":529,"_342":754,"_20":239,"_478":775,"_466":776},{"_20":239,"_342":754},{"_20":243,"_342":754},{"_467":568,"_342":778,"_575":779,"_580":790,"_584":796},"Inputs",[780,782,784,786,788],{"_469":470,"_342":781,"_20":251},"Checkbox",{"_469":468,"_342":783,"_20":259},"Select",{"_469":487,"_342":785,"_20":267},"Radios",{"_469":528,"_342":787,"_20":275},"Hidden Inputs",{"_469":529,"_342":789,"_20":283},"Default Value",[791,792,793,794,795],{"_469":470,"_342":781,"_20":247},{"_469":468,"_342":783,"_20":255},{"_469":487,"_342":785,"_20":263},{"_469":528,"_342":787,"_20":271},{"_469":529,"_342":789,"_20":279},[797,800,803,806,809],{"_469":470,"_342":781,"_20":247,"_478":798,"_466":799},{"_20":247,"_342":781},{"_20":251,"_342":781},{"_469":468,"_342":783,"_20":255,"_478":801,"_466":802},{"_20":255,"_342":783},{"_20":259,"_342":783},{"_469":487,"_342":785,"_20":263,"_478":804,"_466":805},{"_20":263,"_342":785},{"_20":267,"_342":785},{"_469":528,"_342":787,"_20":271,"_478":807,"_466":808},{"_20":271,"_342":787},{"_20":275,"_342":787},{"_469":529,"_342":789,"_20":279,"_478":810,"_466":811},{"_20":279,"_342":789},{"_20":283,"_342":789},{"_467":813,"_342":814,"_575":815,"_580":822,"_584":826},9,"Error Boundaries",[816,818,820],{"_469":470,"_342":817,"_20":291},"Composition",{"_469":468,"_342":819,"_20":299},"Other Errors",{"_469":487,"_342":821,"_20":307},"Reset",[823,824,825],{"_469":470,"_342":817,"_20":287},{"_469":468,"_342":819,"_20":295},{"_469":487,"_342":821,"_20":303},[827,830,833],{"_469":470,"_342":817,"_20":287,"_478":828,"_466":829},{"_20":287,"_342":817},{"_20":291,"_342":817},{"_469":468,"_342":819,"_20":295,"_478":831,"_466":832},{"_20":295,"_342":819},{"_20":299,"_342":819},{"_469":487,"_342":821,"_20":303,"_478":834,"_466":835},{"_20":303,"_342":821},{"_20":307,"_342":821},{"_467":479,"_342":837,"_575":838,"_580":845,"_584":849},"Rendering Arrays",[839,841,843],{"_469":470,"_342":840,"_20":315},"Key prop",{"_469":468,"_342":842,"_20":323},"Focus State",{"_469":487,"_342":844,"_20":331},"Key Reset",[846,847,848],{"_469":470,"_342":840,"_20":311},{"_469":468,"_342":842,"_20":319},{"_469":487,"_342":844,"_20":327},[850,853,856],{"_469":470,"_342":840,"_20":311,"_478":851,"_466":852},{"_20":311,"_342":840},{"_20":315,"_342":840},{"_469":468,"_342":842,"_20":319,"_478":854,"_466":855},{"_20":319,"_342":842},{"_20":323,"_342":842},{"_469":487,"_342":844,"_20":327,"_478":857,"_466":858},{"_20":327,"_342":844},{"_20":331,"_342":844},"playground",{"_861":-5,"_467":-2,"_469":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_865":866,"_398":343,"_386":867,"_1060":1061,"_1062":1063,"_1064":1065,"_1069":1070,"_1075":1076},"articleId","workshop-react-fundamentals-8-finished",{"_22":868,"_467":568,"_869":870,"_342":778,"_871":872,"_873":874,"_875":876,"_878":879,"_584":881,"_580":1008,"_575":1034},"/myapp/workshop-content/exercises/08.inputs","dirName","08.inputs","instructionsCode","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),y=(n,e)=>{for(var o in e)i(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!w.call(n,r)&&r!==o&&i(n,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return n};var b=(n,e,o)=>(o=n!=null?u(m(n)):{},a(e||!n||!n.__esModule?i(o,\"default\",{value:n,enumerable:!0}):o,n)),x=n=>a(i({},\"__esModule\",{value:!0}),n);var c=g((E,l)=>{l.exports=_jsx_runtime});var j={};y(j,{default:()=>d,frontmatter:()=>v});var t=b(c()),v=void 0;function h(n){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:o}=e;return o||_(\"EpicVideo\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Inputs\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-inputs\"}),`\n`,(0,t.jsxs)(e.p,{children:[`There are lots of different types of form elements built-into the browser you\ncan use (of varying degrees of usefulness because of the way they are designed).\n`,(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input\",children:\"Find a list of standard input types here\"}),\".\"]}),`\n`,(0,t.jsx)(e.p,{children:`In general, you use these form elements in React the same way you use them in\nregular HTML, but there are a few exceptions (especially regarding default\nvalues). So we're going to explore all the types of form elements in this\nexercise.`}),`\n`,(0,t.jsxs)(e.p,{children:[`There are a number of ways you can be notified of changes to form elements.\nWe'll not be covering them in this workshop (we'll get into it more in a future\nworkshop when we talk about managing state), but if you just can't wait, play\naround with `,(0,t.jsx)(e.code,{children:\"onChange\"}),` (which behaves like\n`,(0,t.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event\",children:[\"the browser's \",(0,t.jsx)(e.code,{children:\"input\"}),\" event\"]}),\").\"]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}function _(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return x(j);})();\n;return Component;","finishedCode","var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var j=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),w=(e,t)=>{for(var n in t)s(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of h(t))!l.call(e,r)&&r!==n&&s(e,r,{get:()=>t[r],enumerable:!(i=f(t,r))||i.enumerable});return e};var _=(e,t,n)=>(n=e!=null?m(x(e)):{},c(t||!e||!e.__esModule?s(n,\"default\",{value:e,enumerable:!0}):n,e)),g=e=>c(s({},\"__esModule\",{value:!0}),e);var d=j((M,a)=>{a.exports=_jsx_runtime});var k={};w(k,{default:()=>u,frontmatter:()=>y});var o=_(d()),y=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||b(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Inputs\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-inputs\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great job! You've gotten a good start on how to use many of the input types\nin React.`})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function b(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(k);})();\n;return Component;","instructionsEpicVideoEmbeds",[877],"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-inputs","finishedEpicVideoEmbeds",[880],"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-inputs",[882,916,939,962,985],{"_469":470,"_478":883,"_466":904},{"_20":247,"_342":781,"_869":884,"_22":248,"_24":249,"_871":885,"_886":887,"_889":890,"_898":899,"_901":902,"_467":568,"_469":470,"_9":478,"_903":251},"01.problem.checkbox","var Component=(()=>{var f=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},h=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!x.call(t,c)&&c!==o&&r(t,c,{get:()=>e[c],enumerable:!(i=u(e,c))||i.enumerable});return t};var k=(t,e,o)=>(o=t!=null?f(p(t)):{},h(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>h(r({},\"__esModule\",{value:!0}),t);var a=w((E,d)=>{d.exports=_jsx_runtime});var v={};b(v,{default:()=>l,frontmatter:()=>_});var n=k(a()),_=void 0;function s(t){let e={code:\"code\",em:\"em\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||j(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Checkbox\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/checkbox\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} We need to add a checkbox for whether the user has already signed a waiver.\"}),`\n`,(0,n.jsxs)(e.p,{children:[`For checkboxes, typically they appear on the left side of the label and in this\ncase we can even have the checkbox be `,(0,n.jsx)(e.em,{children:\"inside\"}),` the label which means we don't\nneed to worry about the `,(0,n.jsx)(e.code,{children:\"for\"}),\" and \",(0,n.jsx)(e.code,{children:\"id\"}),\" attributes which is nice.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Please add the checkbox to the form.\"}),`\n`,(0,n.jsx)(e.p,{children:`Once you've done that, make sure to submit the form with the checkbox checked\nand without it checked so you can familiarize yourself with the difference in\nform data because it's kinda funny.`})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}function j(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(v);})();\n;return Component;","epicVideoEmbeds",[888],"https://www.epicreact.dev/workshops/react-fundamentals/checkbox","test",{"_9":891,"_892":893,"_894":895},"browser","pathname","/app/08.01.problem/test/","testFiles",[896,897],"action.test.ts","form.test.ts","dev",{"_9":891,"_892":900},"/app/08.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/08.inputs/01.problem.checkbox?view=editor&title=Checkbox+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","solutionName",{"_20":251,"_342":781,"_869":905,"_22":252,"_24":253,"_871":906,"_886":907,"_889":909,"_898":912,"_901":914,"_467":568,"_469":470,"_9":466,"_915":-5},"01.solution.checkbox","var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!x.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(c=l(e,r))||c.enumerable});return t};var g=(t,e,o)=>(o=t!=null?p(f(t)):{},s(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),_=t=>s(i({},\"__esModule\",{value:!0}),t);var a=w((E,d)=>{d.exports=_jsx_runtime});var y={};b(y,{default:()=>u,frontmatter:()=>j});var n=g(a()),j=void 0;function h(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||k(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Checkbox\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/checkbox/solution\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great job! Interesting (weird) how checkboxes work huh?\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"You may have also noticed that the \",(0,n.jsx)(e.code,{children:\"age\"}),` input is a string even though its\n`,(0,n.jsx)(e.code,{children:\"type\"}),\" attribute is \",(0,n.jsx)(e.code,{children:\"number\"}),`. It's good to understand how values are submitted\nfor different input types!`]})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}function k(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(y);})();\n;return Component;",[908],"https://www.epicreact.dev/workshops/react-fundamentals/checkbox/solution",{"_9":891,"_892":910,"_894":911},"/app/08.01.solution/test/",[896,897],{"_9":891,"_892":913},"/app/08.01.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/08.inputs/01.solution.checkbox?view=editor&title=Checkbox+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","problemName",{"_469":468,"_478":917,"_466":928},{"_20":255,"_342":783,"_869":918,"_22":256,"_24":257,"_871":919,"_886":920,"_889":922,"_898":925,"_901":927,"_467":568,"_469":468,"_9":478,"_903":259},"02.problem.select","var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),_=(n,e)=>{for(var o in e)c(n,o,{get:e[o],enumerable:!0})},d=(n,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!x.call(n,r)&&r!==o&&c(n,r,{get:()=>e[r],enumerable:!(i=u(e,r))||i.enumerable});return n};var j=(n,e,o)=>(o=n!=null?p(m(n)):{},d(e||!n||!n.__esModule?c(o,\"default\",{value:n,enumerable:!0}):o,n)),y=n=>d(c({},\"__esModule\",{value:!0}),n);var s=w((b,l)=>{l.exports=_jsx_runtime});var v={};_(v,{default:()=>h,frontmatter:()=>M});var t=j(s()),M=void 0;function a(n){let e={a:\"a\",code:\"code\",h1:\"h1\",li:\"li\",p:\"p\",ul:\"ul\",...n.components},{EpicVideo:o}=e;return o||g(\"EpicVideo\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Select\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/select\"}),`\n`,(0,t.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} We have four different account types:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Admin\"}),`\n`,(0,t.jsx)(e.li,{children:\"Teacher\"}),`\n`,(0,t.jsx)(e.li,{children:\"Parent\"}),`\n`,(0,t.jsx)(e.li,{children:\"Student\"}),`\n`]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Please add a \",(0,t.jsx)(e.code,{children:\"\"}),\" on MDN\"]}),\".\"]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(a,{...n})}):a(n)}function g(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(v);})();\n;return Component;",[921],"https://www.epicreact.dev/workshops/react-fundamentals/select",{"_9":891,"_892":923,"_894":924},"/app/08.02.problem/test/",[896,897],{"_9":891,"_892":926},"/app/08.02.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/08.inputs/02.problem.select?view=editor&title=Select+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":259,"_342":783,"_869":929,"_22":260,"_24":261,"_871":930,"_886":931,"_889":933,"_898":936,"_901":938,"_467":568,"_469":468,"_9":466,"_915":-5},"02.solution.select","var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=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)c(e,n,{get:t[n],enumerable:!0})},i=(e,t,n,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of f(t))!x.call(e,r)&&r!==n&&c(e,r,{get:()=>t[r],enumerable:!(s=l(t,r))||s.enumerable});return e};var j=(e,t,n)=>(n=e!=null?m(h(e)):{},i(t||!e||!e.__esModule?c(n,\"default\",{value:e,enumerable:!0}):n,e)),g=e=>i(c({},\"__esModule\",{value:!0}),e);var p=w((v,a)=>{a.exports=_jsx_runtime});var M={};_(M,{default:()=>u,frontmatter:()=>y});var o=j(p()),y=void 0;function d(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:\"Select\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/select/solution\"}),`\n`,(0,o.jsx)(t.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great work. Now our users can select an account type with some given options.\"})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(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;",[932],"https://www.epicreact.dev/workshops/react-fundamentals/select/solution",{"_9":891,"_892":934,"_894":935},"/app/08.02.solution/test/",[896,897],{"_9":891,"_892":937},"/app/08.02.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/08.inputs/02.solution.select?view=editor&title=Select+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_469":487,"_478":940,"_466":951},{"_20":263,"_342":785,"_869":941,"_22":264,"_24":265,"_871":942,"_886":943,"_889":945,"_898":948,"_901":950,"_467":568,"_469":487,"_9":478,"_903":267},"03.problem.radio","var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var o in e)a(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!b.call(t,i)&&i!==o&&a(t,i,{get:()=>e[i],enumerable:!(r=p(e,i))||r.enumerable});return t};var x=(t,e,o)=>(o=t!=null?u(f(t)):{},c(e||!t||!t.__esModule?a(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>c(a({},\"__esModule\",{value:!0}),t);var l=w((E,d)=>{d.exports=_jsx_runtime});var j={};g(j,{default:()=>h,frontmatter:()=>v});var n=x(l()),v=void 0;function s(t){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||_(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Radios\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/radios\"}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} We need to allow the user to select the visibility of the account. It can be\neither Public or Private. We could use a `,(0,n.jsx)(e.code,{children:\"

08. Inputs/Elaboration