[{"_1":2,"_554":-5,"_555":-5},"loaderData",{"_3":4,"_365":366,"_469":470,"_553":-5},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_134":135,"_187":137,"_188":139,"_140":141,"_189":190,"_200":201,"_225":-5,"_226":-5,"_227":228},"userId",{"_7":8,"_9":10},"id","wwceal5348pfbe2hs7hrk5ft","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],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.composition/01.problem.compose","relativePath","exercises/01.composition/01.problem.compose",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.composition/01.solution.compose","exercises/01.composition/01.solution.compose",{"_20":31,"_22":32,"_24":33},"02.01.problem","/myapp/workshop-content/exercises/02.latest-ref/01.problem.ref","exercises/02.latest-ref/01.problem.ref",{"_20":35,"_22":36,"_24":37},"02.01.solution","/myapp/workshop-content/exercises/02.latest-ref/01.solution.ref","exercises/02.latest-ref/01.solution.ref",{"_20":39,"_22":40,"_24":41},"03.01.problem","/myapp/workshop-content/exercises/03.compound-components/01.problem.context","exercises/03.compound-components/01.problem.context",{"_20":43,"_22":44,"_24":45},"03.01.solution","/myapp/workshop-content/exercises/03.compound-components/01.solution.context","exercises/03.compound-components/01.solution.context",{"_20":47,"_22":48,"_24":49},"03.02.problem","/myapp/workshop-content/exercises/03.compound-components/02.problem.validation","exercises/03.compound-components/02.problem.validation",{"_20":51,"_22":52,"_24":53},"03.02.solution","/myapp/workshop-content/exercises/03.compound-components/02.solution.validation","exercises/03.compound-components/02.solution.validation",{"_20":55,"_22":56,"_24":57},"04.01.problem","/myapp/workshop-content/exercises/04.slots/01.problem.context","exercises/04.slots/01.problem.context",{"_20":59,"_22":60,"_24":61},"04.01.solution","/myapp/workshop-content/exercises/04.slots/01.solution.context","exercises/04.slots/01.solution.context",{"_20":63,"_22":64,"_24":65},"04.02.problem","/myapp/workshop-content/exercises/04.slots/02.problem.generic","exercises/04.slots/02.problem.generic",{"_20":67,"_22":68,"_24":69},"04.02.solution","/myapp/workshop-content/exercises/04.slots/02.solution.generic","exercises/04.slots/02.solution.generic",{"_20":71,"_22":72,"_24":73},"04.03.problem","/myapp/workshop-content/exercises/04.slots/03.problem.prop","exercises/04.slots/03.problem.prop",{"_20":75,"_22":76,"_24":77},"04.03.solution","/myapp/workshop-content/exercises/04.slots/03.solution.prop","exercises/04.slots/03.solution.prop",{"_20":79,"_22":80,"_24":81},"05.01.problem","/myapp/workshop-content/exercises/05.prop-getters/01.problem.collections","exercises/05.prop-getters/01.problem.collections",{"_20":83,"_22":84,"_24":85},"05.01.solution","/myapp/workshop-content/exercises/05.prop-getters/01.solution.collections","exercises/05.prop-getters/01.solution.collections",{"_20":87,"_22":88,"_24":89},"05.02.problem","/myapp/workshop-content/exercises/05.prop-getters/02.problem.getters","exercises/05.prop-getters/02.problem.getters",{"_20":91,"_22":92,"_24":93},"05.02.solution","/myapp/workshop-content/exercises/05.prop-getters/02.solution.getters","exercises/05.prop-getters/02.solution.getters",{"_20":95,"_22":96,"_24":97},"06.01.problem","/myapp/workshop-content/exercises/06.state-initializers/01.problem.initial","exercises/06.state-initializers/01.problem.initial",{"_20":99,"_22":100,"_24":101},"06.01.solution","/myapp/workshop-content/exercises/06.state-initializers/01.solution.initial","exercises/06.state-initializers/01.solution.initial",{"_20":103,"_22":104,"_24":105},"06.02.problem","/myapp/workshop-content/exercises/06.state-initializers/02.problem.stability","exercises/06.state-initializers/02.problem.stability",{"_20":107,"_22":108,"_24":109},"06.02.solution","/myapp/workshop-content/exercises/06.state-initializers/02.solution.stability","exercises/06.state-initializers/02.solution.stability",{"_20":111,"_22":112,"_24":113},"07.01.problem","/myapp/workshop-content/exercises/07.state-reducer/01.problem.reducer","exercises/07.state-reducer/01.problem.reducer",{"_20":115,"_22":116,"_24":117},"07.01.solution","/myapp/workshop-content/exercises/07.state-reducer/01.solution.reducer","exercises/07.state-reducer/01.solution.reducer",{"_20":119,"_22":120,"_24":121},"07.02.problem","/myapp/workshop-content/exercises/07.state-reducer/02.problem.default","exercises/07.state-reducer/02.problem.default",{"_20":123,"_22":124,"_24":125},"07.02.solution","/myapp/workshop-content/exercises/07.state-reducer/02.solution.default","exercises/07.state-reducer/02.solution.default",{"_20":127,"_22":128,"_24":129},"08.01.problem","/myapp/workshop-content/exercises/08.control-props/01.problem.control","exercises/08.control-props/01.problem.control",{"_20":131,"_22":132,"_24":133},"08.01.solution","/myapp/workshop-content/exercises/08.control-props/01.solution.control","exercises/08.control-props/01.solution.control","workshopConfig",{"_136":137,"_138":139,"_140":141,"_147":148,"_165":166,"_167":168,"_169":170,"_171":172,"_175":176,"_181":182,"_185":186},"title","Advanced React Patterns 🤯","subtitle","Learn how to build simple and flexible React Components and Hooks using modern patterns","instructor",{"_20":142,"_143":144,"_145":146},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_149":150,"_151":152,"_153":154,"_155":156,"_157":158,"_159":160,"_161":162},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","advanced-react-patterns","discordChannelId","1285244676286189569","discordTags",[163,164],"1285246046498328627","1285245811944325193","onboardingVideo","https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/advanced-react-patterns","githubRoot","https://github.com/epicweb-dev/advanced-react-patterns/tree/main","stackBlitzConfig",{"_173":174},"view","editor","forms",{"_177":178,"_179":180},"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",{"_183":184},"enabled",true,"initialRoute","/","workshopTitle","workshopSubtitle","ENV",{"_191":192,"_193":194,"_195":168,"_196":170,"_197":184,"_198":199},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","5.9.0","requestInfo",{"_202":203,"_204":205,"_206":207,"_208":209,"_210":209,"_211":212,"_219":220,"_221":222,"_223":186,"_224":184},"protocol","http:","hostname","advanced-patterns.epicreact.dev","port","","origin","http://advanced-patterns.epicreact.dev","domain","hints",{"_213":214,"_215":216,"_217":218},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/08/finished","session",{"_213":-5},"separator","online","toast","confettiId","presence",{"_229":230},"users",[231,246,258,265,274,283,290,296,304,311,318,327,332,336,342,347,353,360],{"_7":232,"_233":234,"_20":235,"_236":237},"67e8c89dd2f8f64c50cf001bec278cca","avatarUrl","https://www.gravatar.com/avatar/67e8c89dd2f8f64c50cf001bec278cca?size=288&default=identicon","Alaa El-Din Ahmed","location",{"_187":238,"_208":239,"_179":240},"Advanced React APIs 🔥","http://localhost:5639",{"_9":241,"_242":243,"_244":245},"problem","exerciseNumber",4,"stepNumber",2,{"_7":247,"_248":184,"_249":250,"_251":252,"_20":253,"_236":254},"86a8da14-1fd8-456e-90b9-cb2521bc7981","hasAccess","imageUrlSmall","https://cdn.discordapp.com/embed/avatars/3.png?size=64","imageUrlLarge","https://cdn.discordapp.com/embed/avatars/3.png?size=512","yuval",{"_187":255,"_208":239,"_179":256},"React Suspense 🔀",{"_9":241,"_242":257,"_244":243},1,{"_7":259,"_248":16,"_249":260,"_251":261,"_20":262,"_236":263},"9a009b67-0ccc-478e-b1dc-0a8dfd84b519","https://avatars.githubusercontent.com/u/15967030?v=4&size=64","https://avatars.githubusercontent.com/u/15967030?v=4&size=512","benjaminmballa",{"_187":264,"_208":239},"React Fundamentals ⚛",{"_7":266,"_248":184,"_249":267,"_251":268,"_20":269,"_236":270},"e8cb17ed-de12-4160-8ed4-157d3d2a91c3","https://www.gravatar.com/avatar/f6b024dc484ab9d9cc17e343fec6c3fd?size=64&default=identicon","https://www.gravatar.com/avatar/f6b024dc484ab9d9cc17e343fec6c3fd?size=512&default=identicon","Ryan Morrow",{"_187":271,"_208":239,"_179":272},"React Hooks 🎣",{"_9":241,"_242":273,"_244":257},6,{"_7":275,"_248":184,"_249":276,"_251":277,"_20":278,"_236":279},"cb4a328d-9dbe-4a0f-8278-231c0e30a9ed","https://avatars.githubusercontent.com/u/685034?v=4&size=64","https://avatars.githubusercontent.com/u/685034?v=4&size=512","Pat O'Callaghan",{"_187":264,"_208":280,"_179":281},"http://192.168.0.29:5639",{"_242":282},5,{"_7":284,"_248":16,"_249":285,"_251":286,"_20":287,"_236":288},"2105d50c-dee8-4a4c-8e7b-520eb53248a6","https://www.gravatar.com/avatar/93a302ba35b4d1c176925d22b6f74ea3?size=64&default=identicon","https://www.gravatar.com/avatar/93a302ba35b4d1c176925d22b6f74ea3?size=512&default=identicon","ELENA GOLOVKO",{"_187":271,"_208":239,"_179":289},{"_242":282},{"_7":291,"_248":184,"_249":292,"_251":293,"_20":294,"_236":295},"15837a67-5bc7-4128-b17b-d81678ee897e","https://www.gravatar.com/avatar/9cc69f7970a625abf97b56c9fa39e368?size=64&default=identicon","https://www.gravatar.com/avatar/9cc69f7970a625abf97b56c9fa39e368?size=512&default=identicon","Cris Curelaru",{"_187":238,"_208":239},{"_7":297,"_248":16,"_249":298,"_251":299,"_20":300,"_236":301},"66d79c48-429a-478f-995b-7b0878ffa127","https://www.gravatar.com/avatar/69a97984aa170f6423fda5bd8c3eec58?size=64&default=identicon","https://www.gravatar.com/avatar/69a97984aa170f6423fda5bd8c3eec58?size=512&default=identicon","Joshua Obariobe Onungwe",{"_187":302,"_208":239,"_179":303},"Professional Web Forms 📝",{"_9":241,"_242":245,"_244":257},{"_7":305,"_248":184,"_249":306,"_251":307,"_20":308,"_236":309},"09146c81-4d61-4133-8539-ced50ccb7baf","https://cdn.discordapp.com/avatars/139412744439988224/d2f81421b670f2a1e9b0ca0a30662e95.png?size=64","https://cdn.discordapp.com/avatars/139412744439988224/d2f81421b670f2a1e9b0ca0a30662e95.png?size=512","Eric Lachance",{"_187":271,"_208":239,"_179":310},{"_9":241,"_242":273,"_244":257},{"_7":312,"_248":184,"_249":313,"_251":314,"_20":315,"_236":316},"9a9693e8-80a1-4e72-9d12-d5e54e88e50a","https://cdn.discordapp.com/avatars/634128025910378498/107df324bca257cc4274d01fcc322e79.png?size=64","https://cdn.discordapp.com/avatars/634128025910378498/107df324bca257cc4274d01fcc322e79.png?size=512","Rafael Hernandez",{"_187":264,"_208":239,"_179":317},{"_242":282},{"_7":319,"_248":184,"_249":320,"_251":321,"_20":322,"_236":323},"d67ebaeb-d503-4d56-b908-d1387251ad84","https://www.gravatar.com/avatar/a893d3c029e73fe037551021b33e729c?size=64&default=identicon","https://www.gravatar.com/avatar/a893d3c029e73fe037551021b33e729c?size=512&default=identicon","Scott D'Alessandro",{"_187":324,"_208":239,"_179":325},"Data Modeling Deep Dive 💾",{"_242":326},9,{"_7":328,"_236":329},"aod1txw39a1jnkleuny6zmut",{"_187":264,"_208":330,"_179":331},"http://fundamentals.epicreact.dev",{"_9":241,"_242":257,"_244":257},{"_7":333,"_236":334},"c1622bemnsxhpgdat0c14ahv",{"_187":264,"_208":335},"http://epicweb-dev-react-fundamentals.fly.dev",{"_7":337,"_248":184,"_249":338,"_251":339,"_20":-5,"_236":340},"b878f6b7-6366-43b4-a8eb-e0c25b5baec7","https://cdn.discordapp.com/avatars/540292879541862411/87105f36fb906d0ad3bd2c1b7640bc50.png?size=64","https://cdn.discordapp.com/avatars/540292879541862411/87105f36fb906d0ad3bd2c1b7640bc50.png?size=512",{"_187":271,"_208":239,"_179":341},{"_9":241,"_242":257,"_244":282},{"_7":343,"_236":344},"ux97x1bikmli7a3apckphaz4",{"_187":345,"_208":346},"Tailwind CSS Color Tokens 🎨","http://epicweb-dev-tailwindcss-color-tokens.fly.dev",{"_7":348,"_248":184,"_249":349,"_251":350,"_20":-5,"_236":351},"31471d6d-9123-4204-9d0e-bd6088ee0603","https://www.gravatar.com/avatar/4bf2cee6512562472ea162d42c2e1067?size=64&default=identicon","https://www.gravatar.com/avatar/4bf2cee6512562472ea162d42c2e1067?size=512&default=identicon",{"_187":302,"_208":239,"_179":352},{"_9":241,"_242":257,"_244":245},{"_7":354,"_248":184,"_249":355,"_251":356,"_20":-5,"_236":357},"9a870da3-721b-4cc4-aa89-777441711328","https://www.gravatar.com/avatar/a4f24a80d106ec87c5ca706889e542e4?size=64&default=identicon","https://www.gravatar.com/avatar/a4f24a80d106ec87c5ca706889e542e4?size=512&default=identicon",{"_187":238,"_208":239,"_179":358},{"_9":241,"_242":359,"_244":257},3,{"_7":361,"_236":362},"oya2gu2fszgch54st6reh8ap",{"_187":137,"_208":209,"_179":363},{"_242":364,"_244":-5,"_9":-5},8,"routes/_app+/_layout",{"_187":137,"_367":368,"_465":466,"_468":16},"exercises",[369,381,389,401,418,431,444,457],{"_242":257,"_136":370,"_371":372,"_375":376,"_378":379},"Composition","solutions",[373],{"_244":257,"_136":374,"_20":27},"Composition and Layout Components","problems",[377],{"_244":257,"_136":374,"_20":21},"steps",[380],{"_244":257,"_136":374,"_20":21},{"_242":245,"_136":382,"_371":383,"_375":385,"_378":387},"Latest Ref",[384],{"_244":257,"_136":382,"_20":35},[386],{"_244":257,"_136":382,"_20":31},[388],{"_244":257,"_136":382,"_20":31},{"_242":359,"_136":390,"_371":391,"_375":395,"_378":398},"Compound Components",[392,393],{"_244":257,"_136":390,"_20":43},{"_244":245,"_136":394,"_20":51},"Compound Components Validation",[396,397],{"_244":257,"_136":390,"_20":39},{"_244":245,"_136":394,"_20":47},[399,400],{"_244":257,"_136":390,"_20":39},{"_244":245,"_136":394,"_20":47},{"_242":243,"_136":402,"_371":403,"_375":410,"_378":414},"Slots",[404,406,408],{"_244":257,"_136":405,"_20":59},"Slot Context",{"_244":245,"_136":407,"_20":67},"Generic Slot Components",{"_244":359,"_136":409,"_20":75},"Slot Prop",[411,412,413],{"_244":257,"_136":405,"_20":55},{"_244":245,"_136":407,"_20":63},{"_244":359,"_136":409,"_20":71},[415,416,417],{"_244":257,"_136":405,"_20":55},{"_244":245,"_136":407,"_20":63},{"_244":359,"_136":409,"_20":71},{"_242":282,"_136":419,"_371":420,"_375":425,"_378":428},"Prop Collections and Getters",[421,423],{"_244":257,"_136":422,"_20":83},"Prop Collections",{"_244":245,"_136":424,"_20":91},"Prop Getters",[426,427],{"_244":257,"_136":422,"_20":79},{"_244":245,"_136":424,"_20":87},[429,430],{"_244":257,"_136":422,"_20":79},{"_244":245,"_136":424,"_20":87},{"_242":273,"_136":432,"_371":433,"_375":438,"_378":441},"State Initializer",[434,436],{"_244":257,"_136":435,"_20":99},"Initialize Toggle",{"_244":245,"_136":437,"_20":107},"Stability",[439,440],{"_244":257,"_136":435,"_20":95},{"_244":245,"_136":437,"_20":103},[442,443],{"_244":257,"_136":435,"_20":95},{"_244":245,"_136":437,"_20":103},{"_242":445,"_136":446,"_371":447,"_375":451,"_378":454},7,"State Reducer",[448,449],{"_244":257,"_136":446,"_20":115},{"_244":245,"_136":450,"_20":123},"Default State Reducer",[452,453],{"_244":257,"_136":446,"_20":111},{"_244":245,"_136":450,"_20":119},[455,456],{"_244":257,"_136":446,"_20":111},{"_244":245,"_136":450,"_20":119},{"_242":364,"_136":458,"_371":459,"_375":461,"_378":463},"Control Props",[460],{"_244":257,"_136":458,"_20":131},[462],{"_244":257,"_136":458,"_20":127},[464],{"_244":257,"_136":458,"_20":127},"playground",{"_467":-5,"_242":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_471":472,"_187":137,"_179":473,"_534":535,"_536":537,"_538":539,"_543":544,"_549":550},"articleId","workshop-advanced-react-patterns-8-finished",{"_242":364,"_474":475,"_136":458,"_476":477,"_478":479,"_480":481,"_483":484,"_378":486,"_375":522,"_371":528},"dirName","08.control-props","instructionsCode","var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var l in e)r(n,l,{get:e[l],enumerable:!0})},o=(n,e,l,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!y.call(n,s)&&s!==l&&r(n,s,{get:()=>e[s],enumerable:!(t=b(e,s))||t.enumerable});return n};var w=(n,e,l)=>(l=n!=null?p(m(n)):{},o(e||!n||!n.__esModule?r(l,\"default\",{value:n,enumerable:!0}):l,n)),k=n=>o(r({},\"__esModule\",{value:!0}),n);var i=v((x,c)=>{c.exports=_jsx_runtime});var N={};g(N,{default:()=>h,frontmatter:()=>f});var a=w(i()),f=void 0;function d(n){let e={a:\"a\",code:\"code\",em:\"em\",h1:\"h1\",li:\"li\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",ul:\"ul\",...n.components},{EpicVideo:l}=e;return l||D(\"EpicVideo\",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"Control Props\"}),`\n`,(0,a.jsx)(l,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-control-props\"}),`\n`,(0,a.jsx)(\"callout-success\",{children:(0,a.jsxs)(e.p,{children:[(0,a.jsx)(e.strong,{children:\"One liner:\"}),` The Control Props pattern allows users to completely control\nstate values within your component. This differs from the state reducer\npattern in the fact that you can not only change the state changes based on\nactions dispatched but you `,(0,a.jsx)(e.em,{children:\"also\"}),` can trigger state changes from outside the\ncomponent or hook as well.`]})}),`\n`,(0,a.jsx)(e.p,{children:`Sometimes, people want to be able to manage the internal state of our component\nfrom the outside. The state reducer allows them to manage what state changes are\nmade when a state change happens, but sometimes people may want to make state\nchanges themselves. We can allow them to do this with a feature called \"Control\nProps.\"`}),`\n`,(0,a.jsxs)(e.p,{children:[`This concept is basically the same as\n`,(0,a.jsx)(e.a,{href:\"https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable\",children:\"controlled form elements \\u{1F4DC}\"}),`\nin React that you've probably used many times.`]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"MyCapitalizedInput\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"capitalizedValue\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setCapitalizedValue\"}),\"] \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",\"''\",\")\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"input\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"capitalizedValue\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onChange\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"e\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setCapitalizedValue\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"e\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"target\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"toUpperCase\"}),\"())\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t/>\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[`In this case, the \"component\" that's implemented the \"control props\" pattern is\nthe `,(0,a.jsx)(e.code,{children:\"\"}),`. Normally it controls state itself (like if you render\n`,(0,a.jsx)(e.code,{children:\"\"}),\" by itself with no \",(0,a.jsx)(e.code,{children:\"value\"}),\" prop). But once you add the \",(0,a.jsx)(e.code,{children:\"value\"}),` prop,\nsuddenly the `,(0,a.jsx)(e.code,{children:\"\"}),` takes the back seat and instead makes \"suggestions\" to\nyou via the `,(0,a.jsx)(e.code,{children:\"onChange\"}),` prop on the state updates that it would normally make\nitself.`]}),`\n`,(0,a.jsx)(e.p,{children:`This flexibility allows us to change how the state is managed (by capitalizing\nthe value), and it also allows us to programmatically change the state whenever\nwe want to, which enables this kind of synchronized input situation:`}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"MyTwoInputs\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"capitalizedValue\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setCapitalizedValue\"}),\"] \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",\"''\",\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"lowerCasedValue\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setLowerCasedValue\"}),\"] \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",\"''\",\")\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"handleInputChange\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"e\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setCapitalizedValue\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"e\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"target\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"toUpperCase\"}),\"())\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setLowerCasedValue\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"e\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"target\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"toLowerCase\"}),\"())\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\t<>\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"input\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"capitalizedValue\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onChange\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"handleInputChange\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"input\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"lowerCasedValue\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onChange\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"handleInputChange\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:(0,a.jsx)(e.strong,{children:\"Real World Projects that use this pattern:\"})}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://github.com/downshift-js/downshift\",children:\"downshift\"})}),`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://www.radix-ui.com/primitives/docs/components/select#controlling-the-value-displayed-in-the-trigger\",children:(0,a.jsx)(e.code,{children:\"@radix-ui/react-select\"})})}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}function D(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(N);})();\n;return Component;","finishedCode","var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(o,t)=>()=>(t||o((t={exports:{}}).exports,t),t.exports),j=(o,t)=>{for(var n in t)s(o,n,{get:t[n],enumerable:!0})},i=(o,t,n,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of m(t))!f.call(o,r)&&r!==n&&s(o,r,{get:()=>t[r],enumerable:!(c=h(t,r))||c.enumerable});return o};var k=(o,t,n)=>(n=o!=null?u(w(o)):{},i(t||!o||!o.__esModule?s(n,\"default\",{value:o,enumerable:!0}):n,o)),y=o=>i(s({},\"__esModule\",{value:!0}),o);var d=x((E,a)=>{a.exports=_jsx_runtime});var b={};j(b,{default:()=>l,frontmatter:()=>_});var e=k(d()),_=void 0;function p(o){let t={h1:\"h1\",p:\"p\",...o.components},{EpicVideo:n}=t;return n||g(\"EpicVideo\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.h1,{children:\"Control Props\"}),`\n`,(0,e.jsx)(n,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-control-props\"}),`\n`,(0,e.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great work! You now know how you can allow developers to control your\ninternal state by using control props. What makes this tricky is supporting both\ncontrolled and uncontrolled and you managed it. Good job!`})]})}function l(o={}){let{wrapper:t}=o.components||{};return t?(0,e.jsx)(t,{...o,children:(0,e.jsx)(p,{...o})}):p(o)}function g(o,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+o+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(b);})();\n;return Component;","instructionsEpicVideoEmbeds",[482],"https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-control-props","finishedEpicVideoEmbeds",[485],"https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-control-props",[487],{"_244":257,"_241":488,"_509":510},{"_20":127,"_136":458,"_474":489,"_22":128,"_24":129,"_476":490,"_491":492,"_494":495,"_503":504,"_506":507,"_242":364,"_244":257,"_9":241,"_508":131},"01.problem.control","var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var t in e)r(n,t,{get:e[t],enumerable:!0})},i=(n,e,t,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!g.call(n,c)&&c!==t&&r(n,c,{get:()=>e[c],enumerable:!(d=u(e,c))||d.enumerable});return n};var _=(n,e,t)=>(t=n!=null?p(f(n)):{},i(e||!n||!n.__esModule?r(t,\"default\",{value:n,enumerable:!0}):t,n)),j=n=>i(r({},\"__esModule\",{value:!0}),n);var s=x((E,a)=>{a.exports=_jsx_runtime});var k={};w(k,{default:()=>l,frontmatter:()=>C});var o=_(s()),C=void 0;function h(n){let e={code:\"code\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:t}=e;return t||v(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Control Props\"}),`\n`,(0,o.jsx)(t,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/control-props\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} In this exercise, we've created a \",(0,o.jsx)(e.code,{children:\"\"}),` component which can accept a\nprop called `,(0,o.jsx)(e.code,{children:\"on\"}),\" and another called \",(0,o.jsx)(e.code,{children:\"onChange\"}),`. These work similar to the\n`,(0,o.jsx)(e.code,{children:\"value\"}),\" and \",(0,o.jsx)(e.code,{children:\"onChange\"}),\" props of \",(0,o.jsx)(e.code,{children:\"\"}),`. Your job is to make those props\nactually control the state of `,(0,o.jsx)(e.code,{children:\"on\"}),\" and call the \",(0,o.jsx)(e.code,{children:\"onChange\"}),` with the suggested\nchanges.`]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(h,{...n})}):h(n)}function v(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(k);})();\n;return Component;","epicVideoEmbeds",[493],"https://www.epicreact.dev/workshops/advanced-react-patterns/control-props","test",{"_9":496,"_497":498,"_499":500},"browser","pathname","/app/08.01.problem/test/","testFiles",[501,502],"synchronized.test.tsx","uncontrolled.test.tsx","dev",{"_9":496,"_497":505},"/app/08.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/08.control-props/01.problem.control?view=editor&title=Control+Props+%28problem%29","solutionName","solution",{"_20":131,"_136":458,"_474":511,"_22":132,"_24":133,"_476":512,"_491":513,"_494":515,"_503":518,"_506":520,"_242":364,"_244":257,"_9":509,"_521":-5},"01.solution.control","var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},i=(t,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!f.call(t,r)&&r!==n&&a(t,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return t};var _=(t,e,n)=>(n=t!=null?h(w(t)):{},i(e||!t||!t.__esModule?a(n,\"default\",{value:t,enumerable:!0}):n,t)),j=t=>i(a({},\"__esModule\",{value:!0}),t);var d=x((M,c)=>{c.exports=_jsx_runtime});var v={};g(v,{default:()=>p,frontmatter:()=>y});var o=_(d()),y=void 0;function l(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||b(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Control Props\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/control-props/solution\"}),`\n`,(0,o.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Phew! That was a tough one! But it's extremely powerful. It wouldn't be hard\nif we just wanted to lift the state. What makes it hard is wanting to have a\nsingle component that can not only manage its own state, but also have that\nstate be managed externally as well.`})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(l,{...t})}):l(t)}function b(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(v);})();\n;return Component;",[514],"https://www.epicreact.dev/workshops/advanced-react-patterns/control-props/solution",{"_9":496,"_497":516,"_499":517},"/app/08.01.solution/test/",[501,502],{"_9":496,"_497":519},"/app/08.01.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/08.control-props/01.solution.control?view=editor&title=Control+Props+%28solution%29","problemName",[523],{"_20":127,"_136":458,"_474":489,"_22":128,"_24":129,"_476":490,"_491":524,"_494":525,"_503":527,"_506":507,"_242":364,"_244":257,"_9":241,"_508":131},[493],{"_9":496,"_497":498,"_499":526},[501,502],{"_9":496,"_497":505},[529],{"_20":131,"_136":458,"_474":511,"_22":132,"_24":133,"_476":512,"_491":530,"_494":531,"_503":533,"_506":520,"_242":364,"_244":257,"_9":509,"_521":-5},[514],{"_9":496,"_497":516,"_499":532},[501,502],{"_9":496,"_497":519},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=Advanced%20React%20Patterns%20%F0%9F%A4%AF&entry.428900931=Control%20Props","epicVideoInfosPromise",["P",537],"exerciseFinished",{"_540":541,"_24":542},"file","/myapp/workshop-content/exercises/08.control-props/FINISHED.mdx","exercises/08.control-props/FINISHED.mdx","prevStepLink",{"_545":546,"_547":548},"to","/exercise/08/01/solution","aria-label","Control Props (solution)","nextStepLink",{"_545":551,"_547":552},"/finished","Finished! 🎉","routes/_app+/exercise+/_layout","actionData","errors"]

08. Control Props/Elaboration