'}),` with a fragment and inspect the DOM to notice that\nthe elements are both rendered as direct children of `,(0,n.jsx)(e.code,{children:\"root\"}),\".\"]}),`\n`,(0,n.jsx)(\"callout-info\",{class:\"aside\",children:(0,n.jsxs)(e.p,{children:[`\\u{1F4B0} TIP: Fragments are common enough that there's a syntax shortcut for them.\nYou can open with `,(0,n.jsx)(e.code,{children:\"<>\"}),\" and close with \",(0,n.jsx)(e.code,{children:\"\"}),\", so:\"]})}),`\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(--base08)\"},children:\"element\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"React.Fragment\"}),\">this is in a fragment\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// is the same as:\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"element\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" <>this is in a fragment\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} We want to get rid of the \",(0,n.jsx)(e.code,{children:'

'}),` we have in there, but\nwe need to keep the `,(0,n.jsx)(e.code,{children:\"

\"}),\" and \",(0,n.jsx)(e.code,{children:\"

\"}),` is\nneeded at all. Might help if you look at what this looks like using\n`,(0,n.jsx)(e.code,{children:\"createElement\"}),` rather than JSX. As I said, understanding how JSX compiles\nto `,(0,n.jsx)(e.code,{children:\"createElement\"}),\" really helps improve your capabilities with JSX!\"]})]})}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 w(x);})();\n;return Component;",[1007],"https://www.epicreact.dev/workshops/react-fundamentals/fragments",{"_9":908,"_909":1009,"_911":1010},"/app/03.05.problem/test/",[913,914],{"_9":908,"_909":1012},"/app/03.05.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/03.using-jsx/05.problem.fragments?view=editor&title=Fragments+%28problem%29",{"_20":99,"_346":644,"_886":1015,"_22":100,"_24":101,"_888":1016,"_903":1017,"_906":1019,"_915":1022,"_918":1024,"_458":489,"_460":529,"_9":457,"_932":-5},"05.solution.fragments","var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of h(t))!x.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(s=f(t,r))||s.enumerable});return e};var g=(e,t,n)=>(n=e!=null?m(l(e)):{},c(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>c(i({},\"__esModule\",{value:!0}),e);var d=w((F,a)=>{a.exports=_jsx_runtime});var E={};_(E,{default:()=>u,frontmatter:()=>y});var o=g(d()),y=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||b(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Fragments\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/fragments/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great! Now you can put elements side-by-side without worrying about their\nparent element.`})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function b(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(E);})();\n;return Component;",[1018],"https://www.epicreact.dev/workshops/react-fundamentals/fragments/solution",{"_9":908,"_909":1020,"_911":1021},"/app/03.05.solution/test/",[913,914],{"_9":908,"_909":1023},"/app/03.05.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/03.using-jsx/05.solution.fragments?view=editor&title=Fragments+%28solution%29",[1026,1031,1036,1041,1046],{"_20":63,"_346":636,"_886":901,"_22":64,"_24":65,"_888":902,"_903":1027,"_906":1028,"_915":1030,"_918":919,"_458":489,"_460":459,"_9":472,"_920":67},[905],{"_9":908,"_909":910,"_911":1029},[913,914],{"_9":908,"_909":917},{"_20":71,"_346":638,"_886":935,"_22":72,"_24":73,"_888":936,"_903":1032,"_906":1033,"_915":1035,"_918":944,"_458":489,"_460":461,"_9":472,"_920":75},[938],{"_9":908,"_909":940,"_911":1034},[913,914],{"_9":908,"_909":943},{"_20":79,"_346":640,"_886":958,"_22":80,"_24":81,"_888":959,"_903":1037,"_906":1038,"_915":1040,"_918":967,"_458":489,"_460":489,"_9":472,"_920":83},[961],{"_9":908,"_909":963,"_911":1039},[913,914],{"_9":908,"_909":966},{"_20":87,"_346":642,"_886":981,"_22":88,"_24":89,"_888":982,"_903":1042,"_906":1043,"_915":1045,"_918":990,"_458":489,"_460":508,"_9":472,"_920":91},[984],{"_9":908,"_909":986,"_911":1044},[913],{"_9":908,"_909":989},{"_20":95,"_346":644,"_886":1004,"_22":96,"_24":97,"_888":1005,"_903":1047,"_906":1048,"_915":1050,"_918":1013,"_458":489,"_460":529,"_9":472,"_920":99},[1007],{"_9":908,"_909":1009,"_911":1049},[913,914],{"_9":908,"_909":1012},[1052,1057,1062,1067,1072],{"_20":67,"_346":636,"_886":922,"_22":68,"_24":69,"_888":923,"_903":1053,"_906":1054,"_915":1056,"_918":931,"_458":489,"_460":459,"_9":457,"_932":-5},[925],{"_9":908,"_909":927,"_911":1055},[913,914],{"_9":908,"_909":930},{"_20":75,"_346":638,"_886":946,"_22":76,"_24":77,"_888":947,"_903":1058,"_906":1059,"_915":1061,"_918":955,"_458":489,"_460":461,"_9":457,"_932":-5},[949],{"_9":908,"_909":951,"_911":1060},[913,914],{"_9":908,"_909":954},{"_20":83,"_346":640,"_886":969,"_22":84,"_24":85,"_888":970,"_903":1063,"_906":1064,"_915":1066,"_918":978,"_458":489,"_460":489,"_9":457,"_932":-5},[972],{"_9":908,"_909":974,"_911":1065},[913,914],{"_9":908,"_909":977},{"_20":91,"_346":642,"_886":992,"_22":92,"_24":93,"_888":993,"_903":1068,"_906":1069,"_915":1071,"_918":1001,"_458":489,"_460":508,"_9":457,"_932":-5},[995],{"_9":908,"_909":997,"_911":1070},[913],{"_9":908,"_909":1000},{"_20":99,"_346":644,"_886":1015,"_22":100,"_24":101,"_888":1016,"_903":1073,"_906":1074,"_915":1076,"_918":1024,"_458":489,"_460":529,"_9":457,"_932":-5},[1018],{"_9":908,"_909":1020,"_911":1075},[913,914],{"_9":908,"_909":1023},"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=Using%20JSX","epicVideoInfosPromise",["P",1080],"exerciseFinished",{"_1083":1084,"_24":1085},"file","/myapp/workshop-content/exercises/03.using-jsx/FINISHED.mdx","exercises/03.using-jsx/FINISHED.mdx","prevStepLink",{"_1088":1089,"_1090":1091},"to","/exercise/03/05/solution","aria-label","Fragments (solution)","nextStepLink",{"_1088":1094,"_1090":668},"/exercise/04","routes/_app+/exercise+/_layout","actionData","errors"]

03. Using JSX/Elaboration