[{"_1":2,"_566":-5,"_567":-5},"loaderData",{"_3":4,"_345":346,"_450":451,"_565":-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","tkfvemhoi3ot8im1uefy62rv","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/03/finished","session",{"_213":-5},"separator","online","toast","confettiId","presence",{"_229":230},"users",[231,243,255,264,272,280,289,297,306,313,319,325,330,334,341],{"_7":232,"_233":184,"_234":235,"_236":237,"_20":238,"_239":240},"f504e10b-d046-4c96-89f1-3f090e0885e3","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/f87835a54d002c0609316d80a5c542af?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/f87835a54d002c0609316d80a5c542af?size=512&default=identicon","CHIBUZOR OBIORA","location",{"_187":241,"_208":242},"Professional Web Forms 📝","http://localhost:5639",{"_7":244,"_233":184,"_234":245,"_236":246,"_20":247,"_239":248},"0f5b8a78-d62b-44e9-bc94-3fba13abab00","https://www.gravatar.com/avatar/2c118fa8ccb6f6ba543f408de37546a0?size=64&default=identicon","https://www.gravatar.com/avatar/2c118fa8ccb6f6ba543f408de37546a0?size=512&default=identicon","Eduardo Ocampo Lopez Escalera",{"_187":249,"_208":242,"_179":250},"React Fundamentals ⚛",{"_9":251,"_252":253,"_254":253},"problem","exerciseNumber",1,"stepNumber",{"_7":256,"_233":16,"_234":257,"_236":258,"_20":259,"_239":260},"8913be90-5c7e-44e7-942c-73a3337b0316","https://www.gravatar.com/avatar/99e831fcdd378894b87cd81e0cf06bcf?size=64&default=identicon","https://www.gravatar.com/avatar/99e831fcdd378894b87cd81e0cf06bcf?size=512&default=identicon","Ekwugha Andrew",{"_187":261,"_208":242,"_179":262},"React Hooks 🎣",{"_9":251,"_252":263,"_254":253},2,{"_7":265,"_233":184,"_234":266,"_236":267,"_20":268,"_239":269},"38843a80-3519-4e5f-8830-400c4140bea7","https://cdn.discordapp.com/avatars/696183052057051146/000a789c6810bc44d88b77c8f94af525.png?size=64","https://cdn.discordapp.com/avatars/696183052057051146/000a789c6810bc44d88b77c8f94af525.png?size=512","IAIN LUMSDEN",{"_187":249,"_208":242,"_179":270},{"_252":271},5,{"_7":273,"_233":184,"_234":274,"_236":275,"_20":276,"_239":277},"a6b80663-3f04-4e01-9310-112581a5a27d","https://www.gravatar.com/avatar/b73559455151055bed3cb934a8dcffd0?size=64&default=identicon","https://www.gravatar.com/avatar/b73559455151055bed3cb934a8dcffd0?size=512&default=identicon","Peter M. Cappetto",{"_187":249,"_208":242,"_179":278},{"_9":251,"_252":279,"_254":253},3,{"_7":281,"_233":16,"_234":282,"_236":283,"_20":284,"_239":285},"f6040321-feff-4977-8f13-eff063fa2b19","https://avatars.githubusercontent.com/u/71365794?v=4&size=64","https://avatars.githubusercontent.com/u/71365794?v=4&size=512","museadam",{"_187":286,"_208":242,"_179":287},"Advanced React APIs 🔥",{"_9":251,"_252":288,"_254":263},4,{"_7":290,"_233":184,"_234":291,"_236":292,"_20":293,"_239":294},"d0de3c52-0950-43f7-9fe1-fe290e2be9da","https://www.gravatar.com/avatar/45061cc69cd0cb6c6fab5dcf207b01ed?size=64&default=identicon","https://www.gravatar.com/avatar/45061cc69cd0cb6c6fab5dcf207b01ed?size=512&default=identicon","Aizaz U Khaja",{"_187":249,"_208":242,"_179":295},{"_252":296},10,{"_7":298,"_233":184,"_234":299,"_236":300,"_20":301,"_239":302},"1da91eac-df0f-4541-a637-2633ebe8b7e8","https://www.gravatar.com/avatar/69f2cf01a716bbde0d284f2b41d8c826?size=64&default=identicon","https://www.gravatar.com/avatar/69f2cf01a716bbde0d284f2b41d8c826?size=512&default=identicon","Renado",{"_187":303,"_208":242,"_179":304},"React Performance ⚡",{"_9":305,"_252":263,"_254":279},"solution",{"_7":307,"_233":184,"_234":308,"_236":309,"_20":310,"_239":311},"3357b472-bdc5-498c-9827-61bc5da9cfac","https://www.gravatar.com/avatar/a5dbe6c83239ddad828756c15147e1c3?size=64&default=identicon","https://www.gravatar.com/avatar/a5dbe6c83239ddad828756c15147e1c3?size=512&default=identicon","Krisztina Pap",{"_187":249,"_208":242,"_179":312},{"_9":251,"_252":279,"_254":279},{"_7":314,"_239":315},"ax2fjnsfu1fx5a2p2dwl6ww7",{"_187":316,"_208":317,"_179":318},"React and the Vanishing Network 🧙","http://vanishing-network.epicreact.dev",{"_9":305,"_252":263,"_254":253},{"_7":320,"_233":184,"_234":321,"_236":322,"_20":-5,"_239":323},"b29562b0-1c8f-4888-857c-8b30f2918d06","https://www.gravatar.com/avatar/0527a43e1308267ac94b0dfbc6f974ac?size=64&default=identicon","https://www.gravatar.com/avatar/0527a43e1308267ac94b0dfbc6f974ac?size=512&default=identicon",{"_187":137,"_208":242,"_179":324},{"_9":251,"_252":288,"_254":253},{"_7":326,"_239":327},"morlfmq7ltbnf9bagxel0d7l",{"_187":137,"_208":328,"_179":329},"http://192.168.2.136:5639",{"_9":251,"_252":253,"_254":253},{"_7":331,"_239":332},"pr62opzjp24f00vls19dhm0u",{"_187":137,"_208":209,"_179":333},{"_252":288},{"_7":335,"_239":336},"kyeg2px8xgolq4o8m3h0iyak",{"_187":337,"_208":338,"_179":339},"Full Stack Testing 🧪","http://testing.epicweb.dev",{"_252":340},7,{"_7":342,"_239":343},"kmr5n2f1jojxdtchc7hchoqj",{"_187":137,"_208":209,"_179":344},{"_252":279,"_254":-5,"_9":-5},"routes/_app+/_layout",{"_187":137,"_347":348,"_446":447,"_449":16},"exercises",[349,361,369,381,398,411,425,437],{"_252":253,"_136":350,"_351":352,"_355":356,"_358":359},"Composition","solutions",[353],{"_254":253,"_136":354,"_20":27},"Composition and Layout Components","problems",[357],{"_254":253,"_136":354,"_20":21},"steps",[360],{"_254":253,"_136":354,"_20":21},{"_252":263,"_136":362,"_351":363,"_355":365,"_358":367},"Latest Ref",[364],{"_254":253,"_136":362,"_20":35},[366],{"_254":253,"_136":362,"_20":31},[368],{"_254":253,"_136":362,"_20":31},{"_252":279,"_136":370,"_351":371,"_355":375,"_358":378},"Compound Components",[372,373],{"_254":253,"_136":370,"_20":43},{"_254":263,"_136":374,"_20":51},"Compound Components Validation",[376,377],{"_254":253,"_136":370,"_20":39},{"_254":263,"_136":374,"_20":47},[379,380],{"_254":253,"_136":370,"_20":39},{"_254":263,"_136":374,"_20":47},{"_252":288,"_136":382,"_351":383,"_355":390,"_358":394},"Slots",[384,386,388],{"_254":253,"_136":385,"_20":59},"Slot Context",{"_254":263,"_136":387,"_20":67},"Generic Slot Components",{"_254":279,"_136":389,"_20":75},"Slot Prop",[391,392,393],{"_254":253,"_136":385,"_20":55},{"_254":263,"_136":387,"_20":63},{"_254":279,"_136":389,"_20":71},[395,396,397],{"_254":253,"_136":385,"_20":55},{"_254":263,"_136":387,"_20":63},{"_254":279,"_136":389,"_20":71},{"_252":271,"_136":399,"_351":400,"_355":405,"_358":408},"Prop Collections and Getters",[401,403],{"_254":253,"_136":402,"_20":83},"Prop Collections",{"_254":263,"_136":404,"_20":91},"Prop Getters",[406,407],{"_254":253,"_136":402,"_20":79},{"_254":263,"_136":404,"_20":87},[409,410],{"_254":253,"_136":402,"_20":79},{"_254":263,"_136":404,"_20":87},{"_252":412,"_136":413,"_351":414,"_355":419,"_358":422},6,"State Initializer",[415,417],{"_254":253,"_136":416,"_20":99},"Initialize Toggle",{"_254":263,"_136":418,"_20":107},"Stability",[420,421],{"_254":253,"_136":416,"_20":95},{"_254":263,"_136":418,"_20":103},[423,424],{"_254":253,"_136":416,"_20":95},{"_254":263,"_136":418,"_20":103},{"_252":340,"_136":426,"_351":427,"_355":431,"_358":434},"State Reducer",[428,429],{"_254":253,"_136":426,"_20":115},{"_254":263,"_136":430,"_20":123},"Default State Reducer",[432,433],{"_254":253,"_136":426,"_20":111},{"_254":263,"_136":430,"_20":119},[435,436],{"_254":253,"_136":426,"_20":111},{"_254":263,"_136":430,"_20":119},{"_252":438,"_136":439,"_351":440,"_355":442,"_358":444},8,"Control Props",[441],{"_254":253,"_136":439,"_20":131},[443],{"_254":253,"_136":439,"_20":127},[445],{"_254":253,"_136":439,"_20":127},"playground",{"_448":-5,"_252":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_452":453,"_187":137,"_179":454,"_547":548,"_549":550,"_551":552,"_556":557,"_562":563},"articleId","workshop-advanced-react-patterns-3-finished",{"_252":279,"_455":456,"_136":370,"_457":458,"_459":460,"_461":462,"_464":465,"_358":467,"_355":525,"_351":536},"dirName","03.compound-components","instructionsCode","var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),w=(o,e)=>{for(var t in e)l(o,t,{get:e[t],enumerable:!0})},i=(o,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!y.call(o,a)&&a!==t&&l(o,a,{get:()=>e[a],enumerable:!(r=m(e,a))||r.enumerable});return o};var v=(o,e,t)=>(t=o!=null?p(b(o)):{},i(e||!o||!o.__esModule?l(t,\"default\",{value:o,enumerable:!0}):t,o)),g=o=>i(l({},\"__esModule\",{value:!0}),o);var c=f((I,s)=>{s.exports=_jsx_runtime});var C={};w(C,{default:()=>h,frontmatter:()=>k});var n=v(c()),k=void 0;function d(o){let e={a:\"a\",code:\"code\",h1:\"h1\",li:\"li\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",ul:\"ul\",...o.components},{EpicVideo:t}=e;return t||x(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Compound Components\"}),`\n`,(0,n.jsx)(t,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-compound-components\"}),`\n`,(0,n.jsx)(\"callout-success\",{children:(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"One liner:\"}),` The Compound Components Pattern enables you to provide a set of\ncomponents that implicitly share state for a simple yet powerful declarative\nAPI for reusable components.`]})}),`\n`,(0,n.jsxs)(e.p,{children:[`Compound components are components that work together to form a complete UI. The\nclassic example of this is `,(0,n.jsx)(e.code,{children:\"\"}),` is the element responsible for managing the state of the UI, and\nthe `,(0,n.jsx)(e.code,{children:\"

03. Compound Components/Elaboration