'}),` 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;",[574],"https://www.epicreact.dev/tutorials/get-started-with-react/fragments",{"_9":475,"_476":576,"_478":577},"/app/03.05.problem/test/",[480,481],{"_9":475,"_476":579},"/app/03.05.problem/","https://stackblitz.com/github/epicweb-dev/get-started-with-react/tree/main/exercises/03.using-jsx/05.problem.fragments?view=editor&title=Fragments+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html",{"_20":99,"_142":391,"_453":582,"_22":100,"_24":101,"_455":583,"_470":584,"_473":586,"_482":589,"_485":591,"_267":270,"_269":295,"_9":303,"_499":-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),g=(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 _=(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={};g(E,{default:()=>p,frontmatter:()=>y});var o=_(d()),y=void 0;function u(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/tutorials/get-started-with-react/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 p(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(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;",[585],"https://www.epicreact.dev/tutorials/get-started-with-react/fragments/solution",{"_9":475,"_476":587,"_478":588},"/app/03.05.solution/test/",[480,481],{"_9":475,"_476":590},"/app/03.05.solution/","https://stackblitz.com/github/epicweb-dev/get-started-with-react/tree/main/exercises/03.using-jsx/05.solution.fragments?view=editor&title=Fragments+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html",[593,598,603,608,613],{"_20":63,"_142":383,"_453":468,"_22":64,"_24":65,"_455":469,"_470":594,"_473":595,"_482":597,"_485":486,"_267":270,"_269":279,"_9":266,"_487":67},[472],{"_9":475,"_476":477,"_478":596},[480,481],{"_9":475,"_476":484},{"_20":71,"_142":385,"_453":502,"_22":72,"_24":73,"_455":503,"_470":599,"_473":600,"_482":602,"_485":511,"_267":270,"_269":268,"_9":266,"_487":75},[505],{"_9":475,"_476":507,"_478":601},[480,481],{"_9":475,"_476":510},{"_20":79,"_142":387,"_453":525,"_22":80,"_24":81,"_455":526,"_470":604,"_473":605,"_482":607,"_485":534,"_267":270,"_269":270,"_9":266,"_487":83},[528],{"_9":475,"_476":530,"_478":606},[480,481],{"_9":475,"_476":533},{"_20":87,"_142":389,"_453":548,"_22":88,"_24":89,"_455":549,"_470":609,"_473":610,"_482":612,"_485":557,"_267":270,"_269":305,"_9":266,"_487":91},[551],{"_9":475,"_476":553,"_478":611},[480],{"_9":475,"_476":556},{"_20":95,"_142":391,"_453":571,"_22":96,"_24":97,"_455":572,"_470":614,"_473":615,"_482":617,"_485":580,"_267":270,"_269":295,"_9":266,"_487":99},[574],{"_9":475,"_476":576,"_478":616},[480,481],{"_9":475,"_476":579},[619,624,629,634,639],{"_20":67,"_142":383,"_453":489,"_22":68,"_24":69,"_455":490,"_470":620,"_473":621,"_482":623,"_485":498,"_267":270,"_269":279,"_9":303,"_499":-5},[492],{"_9":475,"_476":494,"_478":622},[480,481],{"_9":475,"_476":497},{"_20":75,"_142":385,"_453":513,"_22":76,"_24":77,"_455":514,"_470":625,"_473":626,"_482":628,"_485":522,"_267":270,"_269":268,"_9":303,"_499":-5},[516],{"_9":475,"_476":518,"_478":627},[480,481],{"_9":475,"_476":521},{"_20":83,"_142":387,"_453":536,"_22":84,"_24":85,"_455":537,"_470":630,"_473":631,"_482":633,"_485":545,"_267":270,"_269":270,"_9":303,"_499":-5},[539],{"_9":475,"_476":541,"_478":632},[480,481],{"_9":475,"_476":544},{"_20":91,"_142":389,"_453":559,"_22":92,"_24":93,"_455":560,"_470":635,"_473":636,"_482":638,"_485":568,"_267":270,"_269":305,"_9":303,"_499":-5},[562],{"_9":475,"_476":564,"_478":637},[480],{"_9":475,"_476":567},{"_20":99,"_142":391,"_453":582,"_22":100,"_24":101,"_455":583,"_470":640,"_473":641,"_482":643,"_485":591,"_267":270,"_269":295,"_9":303,"_499":-5},[585],{"_9":475,"_476":587,"_478":642},[480,481],{"_9":475,"_476":590},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=Get%20Started%20with%20React%20%F0%9F%8F%83%E2%80%8D%E2%9E%A1%EF%B8%8F&entry.428900931=Using%20JSX","epicVideoInfosPromise",["P",647],"exerciseFinished",{"_650":651,"_24":652},"file","/myapp/workshop-content/exercises/03.using-jsx/FINISHED.mdx","exercises/03.using-jsx/FINISHED.mdx","prevStepLink",{"_655":656,"_657":658},"to","/exercise/03/05/solution","aria-label","Fragments (solution)","nextStepLink",{"_655":661,"_657":415},"/exercise/04","actionData","errors"]

03. Using JSX/Elaboration