'}),` 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;",[950],"https://www.epicreact.dev/workshops/react-fundamentals/fragments",{"_9":851,"_852":952,"_854":953},"/app/03.05.problem/test/",[856,857],{"_9":851,"_852":955},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html",{"_20":99,"_342":586,"_829":958,"_22":100,"_24":101,"_831":959,"_846":960,"_849":962,"_858":965,"_861":967,"_467":470,"_469":585,"_9":488,"_875":-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;",[961],"https://www.epicreact.dev/workshops/react-fundamentals/fragments/solution",{"_9":851,"_852":963,"_854":964},"/app/03.05.solution/test/",[856,857],{"_9":851,"_852":966},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html",[969,974,979,984,989],{"_20":63,"_342":577,"_829":844,"_22":64,"_24":65,"_831":845,"_846":970,"_849":971,"_858":973,"_861":862,"_467":470,"_469":468,"_9":466,"_863":67},[848],{"_9":851,"_852":853,"_854":972},[856,857],{"_9":851,"_852":860},{"_20":71,"_342":579,"_829":878,"_22":72,"_24":73,"_831":879,"_846":975,"_849":976,"_858":978,"_861":887,"_467":470,"_469":489,"_9":466,"_863":75},[881],{"_9":851,"_852":883,"_854":977},[856,857],{"_9":851,"_852":886},{"_20":79,"_342":581,"_829":901,"_22":80,"_24":81,"_831":902,"_846":980,"_849":981,"_858":983,"_861":910,"_467":470,"_469":470,"_9":466,"_863":83},[904],{"_9":851,"_852":906,"_854":982},[856,857],{"_9":851,"_852":909},{"_20":87,"_342":583,"_829":924,"_22":88,"_24":89,"_831":925,"_846":985,"_849":986,"_858":988,"_861":933,"_467":470,"_469":519,"_9":466,"_863":91},[927],{"_9":851,"_852":929,"_854":987},[856],{"_9":851,"_852":932},{"_20":95,"_342":586,"_829":947,"_22":96,"_24":97,"_831":948,"_846":990,"_849":991,"_858":993,"_861":956,"_467":470,"_469":585,"_9":466,"_863":99},[950],{"_9":851,"_852":952,"_854":992},[856,857],{"_9":851,"_852":955},[995,1000,1005,1010,1015],{"_20":67,"_342":577,"_829":865,"_22":68,"_24":69,"_831":866,"_846":996,"_849":997,"_858":999,"_861":874,"_467":470,"_469":468,"_9":488,"_875":-5},[868],{"_9":851,"_852":870,"_854":998},[856,857],{"_9":851,"_852":873},{"_20":75,"_342":579,"_829":889,"_22":76,"_24":77,"_831":890,"_846":1001,"_849":1002,"_858":1004,"_861":898,"_467":470,"_469":489,"_9":488,"_875":-5},[892],{"_9":851,"_852":894,"_854":1003},[856,857],{"_9":851,"_852":897},{"_20":83,"_342":581,"_829":912,"_22":84,"_24":85,"_831":913,"_846":1006,"_849":1007,"_858":1009,"_861":921,"_467":470,"_469":470,"_9":488,"_875":-5},[915],{"_9":851,"_852":917,"_854":1008},[856,857],{"_9":851,"_852":920},{"_20":91,"_342":583,"_829":935,"_22":92,"_24":93,"_831":936,"_846":1011,"_849":1012,"_858":1014,"_861":944,"_467":470,"_469":519,"_9":488,"_875":-5},[938],{"_9":851,"_852":940,"_854":1013},[856],{"_9":851,"_852":943},{"_20":99,"_342":586,"_829":958,"_22":100,"_24":101,"_831":959,"_846":1016,"_849":1017,"_858":1019,"_861":967,"_467":470,"_469":585,"_9":488,"_875":-5},[961],{"_9":851,"_852":963,"_854":1018},[856,857],{"_9":851,"_852":966},"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",1023],"exerciseFinished",{"_1026":1027,"_24":1028},"file","/myapp/workshop-content/exercises/03.using-jsx/FINISHED.mdx","exercises/03.using-jsx/FINISHED.mdx","prevStepLink",{"_1031":1032,"_1033":1034},"to","/exercise/03/05/solution","aria-label","Fragments (solution)","nextStepLink",{"_1031":1037,"_1033":610},"/exercise/04","actionData","errors"]

03. Using JSX/Elaboration