[{"_1":2,"_1009":-5,"_1010":-5},"loaderData",{"_3":4,"_563":564,"_859":860},"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","4ab37a60-4b79-4636-86b6-59736a8db6ad","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.41.3","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","657fd7e1b6cc9871fdd8ef86e2f7137edd10552023565164ae9adc480a8eed4c","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/10/finished","session",{"_435":-5},"separator","online","toast","confettiId","presence",{"_451":452},"users",[453,471,481,492,500,507,516,520,524,530,536,542,548,554,558],{"_7":454,"_455":391,"_456":457,"_458":459,"_20":460,"_461":462},"ad3251c9-2810-4e8f-be7e-f4740807dc35","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/35dcfd1f36937f8b58c693625de734f4?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/35dcfd1f36937f8b58c693625de734f4?size=512&default=identicon","accounts@lehnerchristian.com","location",{"_398":463,"_430":464,"_386":465},"React Suspense 🔀","http://localhost:5639",{"_9":466,"_467":468,"_469":470},"solution","exerciseNumber",4,"stepNumber",1,{"_7":472,"_455":391,"_456":473,"_458":474,"_20":475,"_461":476},"0b626446-fa29-48fd-9ad7-f507f244cc77","https://www.gravatar.com/avatar/1c03251ca68332583a0d19603a745107?size=64&default=identicon","https://www.gravatar.com/avatar/1c03251ca68332583a0d19603a745107?size=512&default=identicon","Yuliia Sokolova",{"_398":477,"_430":464,"_386":478},"Advanced React APIs 🔥",{"_9":479,"_467":480,"_469":470},"problem",2,{"_7":482,"_455":391,"_456":483,"_458":484,"_20":485,"_461":486},"a74e739a-0a4d-42ae-a6f0-eed0f941e86a","https://www.gravatar.com/avatar/8120718f9a83ddf0305a4a60baa30c57?size=64&default=identicon","https://www.gravatar.com/avatar/8120718f9a83ddf0305a4a60baa30c57?size=512&default=identicon","Trina Pitcher",{"_398":487,"_430":488,"_386":489},"React Component Testing with Vitest","http://localhost:5640",{"_9":466,"_467":490,"_469":491},3,5,{"_7":493,"_455":391,"_456":494,"_458":495,"_20":496,"_461":497},"aaecfbe2-af21-4053-99be-1300f74a1e37","https://www.gravatar.com/avatar/7edbb85c5d8ccfae2b796c692c31c84e?size=64&default=identicon","https://www.gravatar.com/avatar/7edbb85c5d8ccfae2b796c692c31c84e?size=512&default=identicon","Felipe ",{"_398":498,"_430":464,"_386":499},"MCP Fundamentals 🧱",{"_9":479,"_467":491,"_469":480},{"_7":501,"_455":391,"_456":502,"_458":503,"_20":504,"_461":505},"70078aa1-7b41-40f4-9930-79013303627b","https://avatars.githubusercontent.com/u/4356894?v=4&size=64","https://avatars.githubusercontent.com/u/4356894?v=4&size=512","Thor Anderson",{"_398":498,"_430":464,"_386":506},{"_9":479,"_467":480,"_469":490},{"_7":508,"_455":391,"_456":509,"_458":510,"_20":511,"_461":512},"fd80210f-666b-4081-930d-52062f2086b8","https://www.gravatar.com/avatar/d8963a5ca3c5d15d3292f11def65a533?size=64&default=identicon","https://www.gravatar.com/avatar/d8963a5ca3c5d15d3292f11def65a533?size=512&default=identicon","Joe",{"_398":513,"_430":514,"_386":515},"Advanced React Patterns 🤯","http://localhost:5643",{"_9":479,"_467":468,"_469":470},{"_7":517,"_461":518},"twb7t20jik9535s3ve5u67yg",{"_398":343,"_430":431,"_386":519},{"_467":470},{"_7":521,"_461":522},"b847537c-55fe-462a-99d2-6a5e0b5c065c",{"_398":523,"_430":464},"Full Stack Foundations 🔭",{"_7":525,"_461":526},"hxaafvi958r0un1nyuuyilki",{"_398":527,"_430":528,"_386":529},"React Performance ⚡","http://performance.epicreact.dev",{"_9":479,"_467":470,"_469":480},{"_7":531,"_455":391,"_456":532,"_458":533,"_20":-5,"_461":534},"bf44d876-9808-4ce8-b20d-b831f06d582a","https://www.gravatar.com/avatar/b215683da6ef515f16a27b454471f215?size=64&default=identicon","https://www.gravatar.com/avatar/b215683da6ef515f16a27b454471f215?size=512&default=identicon",{"_398":477,"_430":464,"_386":535},{"_467":490},{"_7":537,"_461":538},"whym4xnpbjktnm6bzvzn4klq",{"_398":539,"_430":540,"_386":541},"Mocking Techniques in Vitest","http://epicweb-dev-mocking-techniques.fly.dev",{"_9":466,"_467":468,"_469":490},{"_7":543,"_455":391,"_456":544,"_458":545,"_20":-5,"_461":546},"fd7d6e19-0656-4a10-a7d2-d1b9d66417d0","https://www.gravatar.com/avatar/39d0d4037c10ff20696891c63e3903d9?size=64&default=identicon","https://www.gravatar.com/avatar/39d0d4037c10ff20696891c63e3903d9?size=512&default=identicon",{"_398":527,"_430":464,"_386":547},{"_9":466,"_467":470,"_469":480},{"_7":549,"_455":391,"_456":550,"_458":551,"_20":-5,"_461":552},"e1ad3ce0-916d-4be5-a65e-d2ee5a18e2f9","https://www.gravatar.com/avatar/7b3339d513433e07c5cb9d1cc7097285?size=64&default=identicon","https://www.gravatar.com/avatar/7b3339d513433e07c5cb9d1cc7097285?size=512&default=identicon",{"_398":498,"_430":464,"_386":553},{"_467":480},{"_7":555,"_461":556},"9ba52d2c-0cf6-4153-b208-4de652a6d794",{"_398":343,"_430":431,"_386":557},{"_467":491},{"_7":559,"_461":560},"c6fdd4fc-8710-4176-8954-f9492a5b5f82",{"_398":343,"_430":431,"_386":561},{"_467":562,"_469":-5,"_9":-5},10,"routes/_app+/_layout",{"_398":343,"_565":566,"_855":856,"_858":16},"exercises",[567,586,609,644,673,714,736,772,808,832],{"_467":470,"_342":568,"_569":570,"_574":575,"_578":579},"Hello World in JS","solutions",[571,572],{"_469":470,"_342":568,"_20":27},{"_469":480,"_342":573,"_20":35},"Generate the Root Node","problems",[576,577],{"_469":470,"_342":568,"_20":21},{"_469":480,"_342":573,"_20":31},"steps",[580,583],{"_469":470,"_342":568,"_20":21,"_479":581,"_466":582},{"_20":21,"_342":568},{"_20":27,"_342":568},{"_469":480,"_342":573,"_20":31,"_479":584,"_466":585},{"_20":31,"_342":573},{"_20":35,"_342":573},{"_467":480,"_342":587,"_569":588,"_574":595,"_578":599},"Raw React APIs",[589,591,593],{"_469":470,"_342":590,"_20":43},"Create React Elements",{"_469":480,"_342":592,"_20":51},"Nesting Elements",{"_469":490,"_342":594,"_20":59},"Deep Nesting Elements",[596,597,598],{"_469":470,"_342":590,"_20":39},{"_469":480,"_342":592,"_20":47},{"_469":490,"_342":594,"_20":55},[600,603,606],{"_469":470,"_342":590,"_20":39,"_479":601,"_466":602},{"_20":39,"_342":590},{"_20":43,"_342":590},{"_469":480,"_342":592,"_20":47,"_479":604,"_466":605},{"_20":47,"_342":592},{"_20":51,"_342":592},{"_469":490,"_342":594,"_20":55,"_479":607,"_466":608},{"_20":55,"_342":594},{"_20":59,"_342":594},{"_467":490,"_342":610,"_569":611,"_574":622,"_578":628},"Using JSX",[612,614,616,618,620],{"_469":470,"_342":613,"_20":67},"Compiling JSX",{"_469":480,"_342":615,"_20":75},"Interpolation",{"_469":490,"_342":617,"_20":83},"Spread props",{"_469":468,"_342":619,"_20":91},"Nesting JSX",{"_469":491,"_342":621,"_20":99},"Fragments",[623,624,625,626,627],{"_469":470,"_342":613,"_20":63},{"_469":480,"_342":615,"_20":71},{"_469":490,"_342":617,"_20":79},{"_469":468,"_342":619,"_20":87},{"_469":491,"_342":621,"_20":95},[629,632,635,638,641],{"_469":470,"_342":613,"_20":63,"_479":630,"_466":631},{"_20":63,"_342":613},{"_20":67,"_342":613},{"_469":480,"_342":615,"_20":71,"_479":633,"_466":634},{"_20":71,"_342":615},{"_20":75,"_342":615},{"_469":490,"_342":617,"_20":79,"_479":636,"_466":637},{"_20":79,"_342":617},{"_20":83,"_342":617},{"_469":468,"_342":619,"_20":87,"_479":639,"_466":640},{"_20":87,"_342":619},{"_20":91,"_342":619},{"_469":491,"_342":621,"_20":95,"_479":642,"_466":643},{"_20":95,"_342":621},{"_20":99,"_342":621},{"_467":468,"_342":645,"_569":646,"_574":655,"_578":660},"Custom Components",[647,649,651,653],{"_469":470,"_342":648,"_20":107},"Simple Function",{"_469":480,"_342":650,"_20":115},"Raw API",{"_469":490,"_342":652,"_20":123},"JSX Components",{"_469":468,"_342":654,"_20":131},"Props",[656,657,658,659],{"_469":470,"_342":648,"_20":103},{"_469":480,"_342":650,"_20":111},{"_469":490,"_342":652,"_20":119},{"_469":468,"_342":654,"_20":127},[661,664,667,670],{"_469":470,"_342":648,"_20":103,"_479":662,"_466":663},{"_20":103,"_342":648},{"_20":107,"_342":648},{"_469":480,"_342":650,"_20":111,"_479":665,"_466":666},{"_20":111,"_342":650},{"_20":115,"_342":650},{"_469":490,"_342":652,"_20":119,"_479":668,"_466":669},{"_20":119,"_342":652},{"_20":123,"_342":652},{"_469":468,"_342":654,"_20":127,"_479":671,"_466":672},{"_20":127,"_342":654},{"_20":131,"_342":654},{"_467":491,"_342":674,"_569":675,"_574":688,"_578":695},"TypeScript",[676,677,679,681,683,685],{"_469":470,"_342":654,"_20":139},{"_469":480,"_342":678,"_20":147},"Narrow Types",{"_469":490,"_342":680,"_20":155},"Derive Types",{"_469":468,"_342":682,"_20":163},"Default Props",{"_469":491,"_342":684,"_20":171},"Reduce Duplication",{"_469":686,"_342":687,"_20":179},6,"Satisfies",[689,690,691,692,693,694],{"_469":470,"_342":654,"_20":135},{"_469":480,"_342":678,"_20":143},{"_469":490,"_342":680,"_20":151},{"_469":468,"_342":682,"_20":159},{"_469":491,"_342":684,"_20":167},{"_469":686,"_342":687,"_20":175},[696,699,702,705,708,711],{"_469":470,"_342":654,"_20":135,"_479":697,"_466":698},{"_20":135,"_342":654},{"_20":139,"_342":654},{"_469":480,"_342":678,"_20":143,"_479":700,"_466":701},{"_20":143,"_342":678},{"_20":147,"_342":678},{"_469":490,"_342":680,"_20":151,"_479":703,"_466":704},{"_20":151,"_342":680},{"_20":155,"_342":680},{"_469":468,"_342":682,"_20":159,"_479":706,"_466":707},{"_20":159,"_342":682},{"_20":163,"_342":682},{"_469":491,"_342":684,"_20":167,"_479":709,"_466":710},{"_20":167,"_342":684},{"_20":171,"_342":684},{"_469":686,"_342":687,"_20":175,"_479":712,"_466":713},{"_20":175,"_342":687},{"_20":179,"_342":687},{"_467":686,"_342":715,"_569":716,"_574":722,"_578":726},"Styling",[717,718,720],{"_469":470,"_342":715,"_20":187},{"_469":480,"_342":719,"_20":195},"Custom Component",{"_469":490,"_342":721,"_20":203},"Size Prop",[723,724,725],{"_469":470,"_342":715,"_20":183},{"_469":480,"_342":719,"_20":191},{"_469":490,"_342":721,"_20":199},[727,730,733],{"_469":470,"_342":715,"_20":183,"_479":728,"_466":729},{"_20":183,"_342":715},{"_20":187,"_342":715},{"_469":480,"_342":719,"_20":191,"_479":731,"_466":732},{"_20":191,"_342":719},{"_20":195,"_342":719},{"_469":490,"_342":721,"_20":199,"_479":734,"_466":735},{"_20":199,"_342":721},{"_20":203,"_342":721},{"_467":737,"_342":738,"_569":739,"_574":750,"_578":756},7,"Forms",[740,742,744,746,748],{"_469":470,"_342":741,"_20":211},"Form",{"_469":480,"_342":743,"_20":219},"Form Action",{"_469":490,"_342":745,"_20":227},"Input Types",{"_469":468,"_342":747,"_20":235},"Submission",{"_469":491,"_342":749,"_20":243},"Form Actions",[751,752,753,754,755],{"_469":470,"_342":741,"_20":207},{"_469":480,"_342":743,"_20":215},{"_469":490,"_342":745,"_20":223},{"_469":468,"_342":747,"_20":231},{"_469":491,"_342":749,"_20":239},[757,760,763,766,769],{"_469":470,"_342":741,"_20":207,"_479":758,"_466":759},{"_20":207,"_342":741},{"_20":211,"_342":741},{"_469":480,"_342":743,"_20":215,"_479":761,"_466":762},{"_20":215,"_342":743},{"_20":219,"_342":743},{"_469":490,"_342":745,"_20":223,"_479":764,"_466":765},{"_20":223,"_342":745},{"_20":227,"_342":745},{"_469":468,"_342":747,"_20":231,"_479":767,"_466":768},{"_20":231,"_342":747},{"_20":235,"_342":747},{"_469":491,"_342":749,"_20":239,"_479":770,"_466":771},{"_20":239,"_342":749},{"_20":243,"_342":749},{"_467":773,"_342":774,"_569":775,"_574":786,"_578":792},8,"Inputs",[776,778,780,782,784],{"_469":470,"_342":777,"_20":251},"Checkbox",{"_469":480,"_342":779,"_20":259},"Select",{"_469":490,"_342":781,"_20":267},"Radios",{"_469":468,"_342":783,"_20":275},"Hidden Inputs",{"_469":491,"_342":785,"_20":283},"Default Value",[787,788,789,790,791],{"_469":470,"_342":777,"_20":247},{"_469":480,"_342":779,"_20":255},{"_469":490,"_342":781,"_20":263},{"_469":468,"_342":783,"_20":271},{"_469":491,"_342":785,"_20":279},[793,796,799,802,805],{"_469":470,"_342":777,"_20":247,"_479":794,"_466":795},{"_20":247,"_342":777},{"_20":251,"_342":777},{"_469":480,"_342":779,"_20":255,"_479":797,"_466":798},{"_20":255,"_342":779},{"_20":259,"_342":779},{"_469":490,"_342":781,"_20":263,"_479":800,"_466":801},{"_20":263,"_342":781},{"_20":267,"_342":781},{"_469":468,"_342":783,"_20":271,"_479":803,"_466":804},{"_20":271,"_342":783},{"_20":275,"_342":783},{"_469":491,"_342":785,"_20":279,"_479":806,"_466":807},{"_20":279,"_342":785},{"_20":283,"_342":785},{"_467":809,"_342":810,"_569":811,"_574":818,"_578":822},9,"Error Boundaries",[812,814,816],{"_469":470,"_342":813,"_20":291},"Composition",{"_469":480,"_342":815,"_20":299},"Other Errors",{"_469":490,"_342":817,"_20":307},"Reset",[819,820,821],{"_469":470,"_342":813,"_20":287},{"_469":480,"_342":815,"_20":295},{"_469":490,"_342":817,"_20":303},[823,826,829],{"_469":470,"_342":813,"_20":287,"_479":824,"_466":825},{"_20":287,"_342":813},{"_20":291,"_342":813},{"_469":480,"_342":815,"_20":295,"_479":827,"_466":828},{"_20":295,"_342":815},{"_20":299,"_342":815},{"_469":490,"_342":817,"_20":303,"_479":830,"_466":831},{"_20":303,"_342":817},{"_20":307,"_342":817},{"_467":562,"_342":833,"_569":834,"_574":841,"_578":845},"Rendering Arrays",[835,837,839],{"_469":470,"_342":836,"_20":315},"Key prop",{"_469":480,"_342":838,"_20":323},"Focus State",{"_469":490,"_342":840,"_20":331},"Key Reset",[842,843,844],{"_469":470,"_342":836,"_20":311},{"_469":480,"_342":838,"_20":319},{"_469":490,"_342":840,"_20":327},[846,849,852],{"_469":470,"_342":836,"_20":311,"_479":847,"_466":848},{"_20":311,"_342":836},{"_20":315,"_342":836},{"_469":480,"_342":838,"_20":319,"_479":850,"_466":851},{"_20":319,"_342":838},{"_20":323,"_342":838},{"_469":490,"_342":840,"_20":327,"_479":853,"_466":854},{"_20":327,"_342":840},{"_20":331,"_342":840},"playground",{"_857":-5,"_467":-2,"_469":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_861":862,"_398":343,"_386":863,"_990":991,"_992":993,"_994":995,"_999":1000,"_1005":1006},"articleId","workshop-react-fundamentals-10-finished",{"_22":864,"_467":562,"_865":866,"_342":833,"_867":868,"_869":870,"_871":872,"_874":875,"_578":877,"_574":958,"_569":974},"/myapp/workshop-content/exercises/10.arrays","dirName","10.arrays","instructionsCode","var Component=(()=>{var b=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var u=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var l in e)s(a,l,{get:e[l],enumerable:!0})},t=(a,e,l,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!v.call(a,r)&&r!==l&&s(a,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return a};var w=(a,e,l)=>(l=a!=null?b(y(a)):{},t(e||!a||!a.__esModule?s(l,\"default\",{value:a,enumerable:!0}):l,a)),k=a=>t(s({},\"__esModule\",{value:!0}),a);var i=u((T,c)=>{c.exports=_jsx_runtime});var x={};g(x,{default:()=>h,frontmatter:()=>f});var n=w(i()),f=void 0;function d(a){let e={code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...a.components},{EpicVideo:l}=e;return l||N(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Rendering Arrays\"}),`\n`,(0,n.jsx)(l,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-rendering-arrays\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"One of the more tricky things with React is the requirement of a \",(0,n.jsx)(e.code,{children:\"key\"}),` prop when\nyou attempt to render a list of elements.`]}),`\n`,(0,n.jsx)(e.p,{children:\"If we want to render a list like this, then there's no problem:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"ui\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" (\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"ul\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"li\"}),\">One\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"li\"}),\">Two\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"li\"}),\">Three\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\")\",`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:\"But rendering an array of elements is very common:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"list\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" [\",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"One\"}),\"'\",\", \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Two\"}),\"'\",\", \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Three\"}),\"'\",\"]\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"ui\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" (\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"ul\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"list\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"listItem\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" (\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"li\"}),\">\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"listItem\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t))\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\")\",`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:`Those will generate the same HTML, but what it actually does is slightly\ndifferent. Let's re-write it to see that difference:`}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"list\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" [\",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"One\"}),\"'\",\", \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Two\"}),\"'\",\", \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Three\"}),\"'\",\"]\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"listUI\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"list\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"listItem\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"li\"}),\">\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"listItem\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// notice that listUI is an array\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"ui\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"ul\"}),\">\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"listUI\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:`So we're interpolating an array of renderable elements. This is totally\nacceptable, but it has interesting implications for when things change over\ntime.`}),`\n`,(0,n.jsx)(e.p,{children:`We haven't covered things changing over time yet, but a warning's going to\nshow up any time you render an array regardless of whether that array changes\nso we're going to address that here.`}),`\n`,(0,n.jsx)(e.p,{children:`If you were to somehow update that list with an added item and tell React to\nupdate the UI, React doesn't really know whether you added an item in the\nmiddle, beginning, or end. And the same goes for when you remove an item (it\ndoesn't know whether that changes is in the middle, beginning, or end either).\nOr maybe you removed them all and replaced them with completely new values.\nReact just doesn't have enough information to know what to do about what you've\ndone to the array.`}),`\n`,(0,n.jsxs)(e.p,{children:[\"In simple cases (like the \",(0,n.jsx)(e.code,{children:\"One\"}),\", \",(0,n.jsx)(e.code,{children:\"Two\"}),\", \",(0,n.jsx)(e.code,{children:\"Three\"}),` example above), it's not a big\ndeal, because React's best-guess works out ok. However, if any of those React\nelements represent a component that is maintaining state, that can be pretty\nproblematic, which this exercise demonstrates.`]})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function N(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(x);})();\n;return Component;","finishedCode","var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),g=(e,n)=>{for(var t in n)s(e,t,{get:n[t],enumerable:!0})},i=(e,n,t,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of h(n))!x.call(e,o)&&o!==t&&s(e,o,{get:()=>n[o],enumerable:!(a=f(n,o))||a.enumerable});return e};var y=(e,n,t)=>(t=e!=null?m(l(e)):{},i(n||!e||!e.__esModule?s(t,\"default\",{value:e,enumerable:!0}):t,e)),_=e=>i(s({},\"__esModule\",{value:!0}),e);var d=w((b,c)=>{c.exports=_jsx_runtime});var E={};g(E,{default:()=>u,frontmatter:()=>j});var r=y(d()),j=void 0;function p(e){let n={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:t}=n;return t||k(\"EpicVideo\",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{children:\"Rendering Arrays\"}),`\n`,(0,r.jsx)(t,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-rendering-arrays\"}),`\n`,(0,r.jsx)(n.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Good work! You've successfully learned the importance of associating react\nelements to the data they represent when rendering arrays.`})]})}function u(e={}){let{wrapper:n}=e.components||{};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}function k(e,n){throw new Error(\"Expected \"+(n?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(E);})();\n;return Component;","instructionsEpicVideoEmbeds",[873],"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-rendering-arrays","finishedEpicVideoEmbeds",[876],"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-rendering-arrays",[878,911,934],{"_469":470,"_479":879,"_466":899},{"_20":311,"_342":836,"_865":880,"_22":312,"_24":313,"_867":881,"_882":883,"_885":886,"_893":894,"_896":897,"_467":562,"_469":470,"_9":479,"_898":315},"01.problem.key-prop","var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},h=(t,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!w.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(a=u(e,i))||a.enumerable});return t};var v=(t,e,o)=>(o=t!=null?p(g(t)):{},h(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>h(r({},\"__esModule\",{value:!0}),t);var c=f((_,d)=>{d.exports=_jsx_runtime});var R={};y(R,{default:()=>l,frontmatter:()=>k});var n=v(c()),k=void 0;function s(t){let e={a:\"a\",code:\"code\",em:\"em\",h1:\"h1\",li:\"li\",ol:\"ol\",p:\"p\",strong:\"strong\",...t.components},{EpicVideo:o}=e;return o||x(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Key prop\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/key-prop\"}),`\n`,(0,n.jsx)(e.p,{children:`We've got a problem. You may have already noticed the error message in the\nconsole about it. Try this:`}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:'Hit the \"remove\" button on the last list item'}),`\n`,(0,n.jsx)(e.li,{children:\"Notice that list item is now gone \\u{1F44D}\"}),`\n`,(0,n.jsx)(e.li,{children:'Hit the \"remove\" button on the first list item'}),`\n`,(0,n.jsx)(e.li,{children:\"Notice that everything's mixed up! \\u{1F626}\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Let me describe what's going on here.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here's the TL;DR: Every React element accepts a special \",(0,n.jsx)(e.code,{children:\"key\"}),` prop you can use\nto help React keep track of elements between updates. If you don't provide it\nwhen rendering a list, React can get things mixed up. The solution is to give\neach element a unique (to the array) `,(0,n.jsx)(e.code,{children:\"key\"}),` prop, and then everything will work\nfine.`]}),`\n`,(0,n.jsx)(e.p,{children:\"Let's dive in a little deeper:\"}),`\n`,(0,n.jsx)(e.p,{children:`If you re-render that list with an added item, React doesn't really know whether\nyou added an item in the middle, beginning, or end. And the same goes for when\nyou remove an item (it doesn't know whether that happened in the middle,\nbeginning, or end either).`}),`\n`,(0,n.jsxs)(e.p,{children:[\"To be clear, \",(0,n.jsx)(e.em,{children:\"we\"}),` know as the developer because we wrote the code, but as far as\nReact is concerned, we simply gave it some react elements before, we gave it\nsome after, and now React is trying to compare the before and after with no\nknowledge of how the elements got from one position to another.`]}),`\n`,(0,n.jsx)(e.p,{children:`Sometimes it's not a big deal, because React's best-guess is right and it works\nout ok. However, if any of those React elements represent a component that is\nmaintaining state (like the value of an input or focus state), that can be\npretty problematic, which this exercise demonstrates.`}),`\n`,(0,n.jsxs)(e.p,{children:[`To solve this problem, we need to give React a hint so it can associate the old\nReact elements with the new ones we're giving it due to the change. We do this\nusing a special prop called the `,(0,n.jsx)(e.code,{children:\"key\"}),\" prop.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[`In this exercise, we have a list of fruit that appear and can be removed. There\nis state that exists (managed by the browser) in the `,(0,n.jsx)(e.code,{children:\"\"}),` for each of the\nfruit: the input's `,(0,n.jsx)(e.code,{children:\"value\"}),\" (initialized via the \",(0,n.jsx)(e.code,{children:\"defaultValue\"}),\" prop).\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Without a \",(0,n.jsx)(e.code,{children:\"key\"}),` prop, for all React knows, you removed an input and gave another\nlabel different text content, which leads to the bug we'll see in the exercise.`]}),`\n`,(0,n.jsx)(e.p,{children:\"So here's the rule:\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[`Whenever you're rendering an array of React elements, each one must have a\nunique `,(0,n.jsx)(e.code,{children:\"key\"}),\" prop.\"]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F4DC} You can learn more about what can go wrong when you don't specify the \",(0,n.jsx)(e.code,{children:\"key\"}),`\nprop in my blog post\n`,(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/understanding-reacts-key-prop\",children:\"Understanding React's key prop\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F4DC} Also, you can get a deeper understanding in this blog post:\n`,(0,n.jsx)(e.a,{href:\"https://epicreact.dev/why-react-needs-a-key-prop\",children:\"Why React needs a key prop\"}),`.\nThat'll give you a bit of what's going on under the hood, so I recommend reading\nthis!`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} The React elements we're rendering are the \",(0,n.jsx)(e.code,{children:\"li\"}),` elements, so for this\nstep, add a `,(0,n.jsx)(e.code,{children:\"key\"}),\" prop there. You can use the \",(0,n.jsx)(e.code,{children:\"item.id\"}),` for the value to ensure\nthat the key value is unique for each element.`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}function x(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(R);})();\n;return Component;","epicVideoEmbeds",[884],"https://www.epicreact.dev/workshops/react-fundamentals/key-prop","test",{"_9":887,"_888":889,"_890":891},"browser","pathname","/app/10.01.problem/test/","testFiles",[892],"key.test.ts","dev",{"_9":887,"_888":895},"/app/10.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/10.arrays/01.problem.key-prop?view=editor&title=Key+prop+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","solutionName",{"_20":315,"_342":836,"_865":900,"_22":316,"_24":317,"_867":901,"_882":902,"_885":904,"_893":907,"_896":909,"_467":562,"_469":470,"_9":466,"_910":-5},"01.solution.key-prop","var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),w=(a,e)=>{for(var r in e)o(a,r,{get:e[r],enumerable:!0})},l=(a,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of b(e))!y.call(a,s)&&s!==r&&o(a,s,{get:()=>e[s],enumerable:!(t=u(e,s))||t.enumerable});return a};var f=(a,e,r)=>(r=a!=null?p(m(a)):{},l(e||!a||!a.__esModule?o(r,\"default\",{value:a,enumerable:!0}):r,a)),g=a=>l(o({},\"__esModule\",{value:!0}),a);var i=v((j,c)=>{c.exports=_jsx_runtime});var F={};w(F,{default:()=>h,frontmatter:()=>k});var n=f(i()),k=void 0;function d(a){let e={code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...a.components},{EpicVideo:r}=e;return r||x(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Key prop\"}),`\n`,(0,n.jsx)(r,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/key-prop/solution\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great work. That was super weird and confusing for our users. They're much\nhappier now.`}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F989} The key only needs to be unique within a given array. So this works\nfine:`}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"element\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" (\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"ul\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"list\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"listItem\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" (\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"li\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"key\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"listItem\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"id\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"listItem\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"value\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t))\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\")\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In our example, the \",(0,n.jsx)(e.code,{children:\"value\"}),` of the input is managed by the browser, but this\nhas even bigger implications when we start working with our own state and\nside-effects. It's a little too early to demonstrate this for you, but you\nshould know that when React removes a component from the DOM, it gets\n\"unmounted\" which will trigger side-effect cleanups, and if new elements are\nadded then those will be \"mounted\" and will trigger your side-effects. This can\ncause some surprising and problematic issues for your users.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"So just remember the rule and always provide a \",(0,n.jsx)(e.code,{children:\"key\"}),` when rendering an array.\nLater when you have more React experience, you can come back to this exercise\nand expand it a bit with custom components that manage state and side-effects to\nobserve the problems caused when you ignore the `,(0,n.jsx)(e.code,{children:\"key\"}),\".\"]})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function x(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(F);})();\n;return Component;",[903],"https://www.epicreact.dev/workshops/react-fundamentals/key-prop/solution",{"_9":887,"_888":905,"_890":906},"/app/10.01.solution/test/",[892],{"_9":887,"_888":908},"/app/10.01.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/10.arrays/01.solution.key-prop?view=editor&title=Key+prop+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","problemName",{"_469":480,"_479":912,"_466":923},{"_20":319,"_342":838,"_865":913,"_22":320,"_24":321,"_867":914,"_882":915,"_885":917,"_893":920,"_896":922,"_467":562,"_469":480,"_9":479,"_898":323},"02.problem.focus-state","var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},a=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!w.call(t,s)&&s!==n&&r(t,s,{get:()=>e[s],enumerable:!(i=f(e,s))||i.enumerable});return t};var g=(t,e,n)=>(n=t!=null?l(m(t)):{},a(e||!t||!t.__esModule?r(n,\"default\",{value:t,enumerable:!0}):n,t)),b=t=>a(r({},\"__esModule\",{value:!0}),t);var u=x((E,c)=>{c.exports=_jsx_runtime});var j={};y(j,{default:()=>h,frontmatter:()=>_});var o=g(u()),_=void 0;function d(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||k(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Focus State\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/focus-state\"}),`\n`,(0,o.jsxs)(e.p,{children:[`\\u{1F989} You can observe that when we're talking about \"state\" we're also talking\nabout keyboard focus as well as what text is selected! As you play around with\nthis, try selecting text in the inputs and observe how the first two examples\ndiffer from the last one. You'll notice that using the array `,(0,o.jsx)(e.code,{children:\"index\"}),` as a key is\nno different from React's default behavior, so it's unlikely to fix issues if\nyou're having them. Best to use a unique ID. Play around with it!`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(d,{...t})}):d(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 b(j);})();\n;return Component;",[916],"https://www.epicreact.dev/workshops/react-fundamentals/focus-state",{"_9":887,"_888":918,"_890":919},"/app/10.02.problem/test/",[892],{"_9":887,"_888":921},"/app/10.02.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/10.arrays/02.problem.focus-state?view=editor&title=Focus+State+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":323,"_342":838,"_865":924,"_22":324,"_24":325,"_867":925,"_882":926,"_885":928,"_893":931,"_896":933,"_467":562,"_469":480,"_9":466,"_910":-5},"02.solution.focus-state","var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var n in e)i(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!w.call(t,r)&&r!==n&&i(t,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return t};var y=(t,e,n)=>(n=t!=null?h(m(t)):{},c(e||!t||!t.__esModule?i(n,\"default\",{value:t,enumerable:!0}):n,t)),_=t=>c(i({},\"__esModule\",{value:!0}),t);var d=x((F,a)=>{a.exports=_jsx_runtime});var b={};g(b,{default:()=>u,frontmatter:()=>k});var o=y(d()),k=void 0;function l(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||j(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Focus State\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/focus-state/solution\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"\\u{1F989} There are some other interesting things you can do with \",(0,o.jsx)(e.code,{children:\"key\"}),`s as well (like\nchanging them on an element to intentionally reset the state of a component).\nFeel free to play around with that if you like, but we'll be using that in a\nfuture workshop so look forward to it!`]})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(l,{...t})}):l(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 _(b);})();\n;return Component;",[927],"https://www.epicreact.dev/workshops/react-fundamentals/focus-state/solution",{"_9":887,"_888":929,"_890":930},"/app/10.02.solution/test/",[892],{"_9":887,"_888":932},"/app/10.02.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/10.arrays/02.solution.focus-state?view=editor&title=Focus+State+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_469":490,"_479":935,"_466":947},{"_20":327,"_342":840,"_865":936,"_22":328,"_24":329,"_867":937,"_882":938,"_885":940,"_893":944,"_896":946,"_467":562,"_469":490,"_9":479,"_898":331},"03.problem.key-reset","var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!w.call(t,s)&&s!==o&&r(t,s,{get:()=>e[s],enumerable:!(i=f(e,s))||i.enumerable});return t};var k=(t,e,o)=>(o=t!=null?u(l(t)):{},a(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),_=t=>a(r({},\"__esModule\",{value:!0}),t);var d=y((M,c)=>{c.exports=_jsx_runtime});var v={};x(v,{default:()=>p,frontmatter:()=>g});var n=k(d()),g=void 0;function h(t){let e={code:\"code\",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:\"Key Reset\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/key-reset\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F989} Interestingly, we can use the \",(0,n.jsx)(e.code,{children:\"key\"}),` as a mechanism for removing and re-adding\nelements to the DOM. This is useful when we want to reset the state of a\ncomponent or elements within a component.`]}),`\n`,(0,n.jsx)(e.p,{children:`We haven't covered state yet, but state is necessary for this exercise so that's\ndone for you. All we need you to do is add the key prop and see how that affects\nthe state of the app. Enjoy!`}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Type in the input, then click \"reset\" and think about why that works the way\nit does.`})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(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 _(v);})();\n;return Component;",[939],"https://www.epicreact.dev/workshops/react-fundamentals/key-reset",{"_9":887,"_888":941,"_890":942},"/app/10.03.problem/test/",[943],"index.test.ts",{"_9":887,"_888":945},"/app/10.03.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/10.arrays/03.problem.key-reset?view=editor&title=Key+Reset+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":331,"_342":840,"_865":948,"_22":332,"_24":333,"_867":949,"_882":950,"_885":952,"_893":955,"_896":957,"_467":562,"_469":490,"_9":466,"_910":-5},"03.solution.key-reset","var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),x=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},a=(e,t,o,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of l(t))!y.call(e,r)&&r!==o&&s(e,r,{get:()=>t[r],enumerable:!(i=f(t,r))||i.enumerable});return e};var _=(e,t,o)=>(o=e!=null?h(m(e)):{},a(t||!e||!e.__esModule?s(o,\"default\",{value:e,enumerable:!0}):o,e)),g=e=>a(s({},\"__esModule\",{value:!0}),e);var u=w((M,c)=>{c.exports=_jsx_runtime});var k={};x(k,{default:()=>p,frontmatter:()=>j});var n=_(u()),j=void 0;function d(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=t;return o||b(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:\"Key Reset\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/key-reset/solution\"}),`\n`,(0,n.jsx)(t.p,{children:`\\u{1F989} This isn't something you're going to do a lot, but it's handy to know about\nfor situations where you want to reset the state of a section of your React app.\nAnd hopefully it helps you understand keys a bit more as well.`})]})}function p(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(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;",[951],"https://www.epicreact.dev/workshops/react-fundamentals/key-reset/solution",{"_9":887,"_888":953,"_890":954},"/app/10.03.solution/test/",[943],{"_9":887,"_888":956},"/app/10.03.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/10.arrays/03.solution.key-reset?view=editor&title=Key+Reset+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",[959,964,969],{"_20":311,"_342":836,"_865":880,"_22":312,"_24":313,"_867":881,"_882":960,"_885":961,"_893":963,"_896":897,"_467":562,"_469":470,"_9":479,"_898":315},[884],{"_9":887,"_888":889,"_890":962},[892],{"_9":887,"_888":895},{"_20":319,"_342":838,"_865":913,"_22":320,"_24":321,"_867":914,"_882":965,"_885":966,"_893":968,"_896":922,"_467":562,"_469":480,"_9":479,"_898":323},[916],{"_9":887,"_888":918,"_890":967},[892],{"_9":887,"_888":921},{"_20":327,"_342":840,"_865":936,"_22":328,"_24":329,"_867":937,"_882":970,"_885":971,"_893":973,"_896":946,"_467":562,"_469":490,"_9":479,"_898":331},[939],{"_9":887,"_888":941,"_890":972},[943],{"_9":887,"_888":945},[975,980,985],{"_20":315,"_342":836,"_865":900,"_22":316,"_24":317,"_867":901,"_882":976,"_885":977,"_893":979,"_896":909,"_467":562,"_469":470,"_9":466,"_910":-5},[903],{"_9":887,"_888":905,"_890":978},[892],{"_9":887,"_888":908},{"_20":323,"_342":838,"_865":924,"_22":324,"_24":325,"_867":925,"_882":981,"_885":982,"_893":984,"_896":933,"_467":562,"_469":480,"_9":466,"_910":-5},[927],{"_9":887,"_888":929,"_890":983},[892],{"_9":887,"_888":932},{"_20":331,"_342":840,"_865":948,"_22":332,"_24":333,"_867":949,"_882":986,"_885":987,"_893":989,"_896":957,"_467":562,"_469":490,"_9":466,"_910":-5},[951],{"_9":887,"_888":953,"_890":988},[943],{"_9":887,"_888":956},"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=Rendering%20Arrays","epicVideoInfosPromise",["P",993],"exerciseFinished",{"_996":997,"_24":998},"file","/myapp/workshop-content/exercises/10.arrays/FINISHED.mdx","exercises/10.arrays/FINISHED.mdx","prevStepLink",{"_1001":1002,"_1003":1004},"to","/exercise/10/03/solution","aria-label","Key Reset (solution)","nextStepLink",{"_1001":1007,"_1003":1008},"/finished","Finished! 🎉","actionData","errors"]

10. Rendering Arrays/Elaboration