'}),` 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;",[990],"https://www.epicreact.dev/workshops/react-fundamentals/fragments",{"_9":891,"_892":992,"_894":993},"/app/03.05.problem/test/",[896,897],{"_9":891,"_892":995},"/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":627,"_869":998,"_22":100,"_24":101,"_871":999,"_886":1000,"_889":1002,"_898":1005,"_901":1007,"_466":530,"_477":626,"_9":529,"_915":-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;",[1001],"https://www.epicreact.dev/workshops/react-fundamentals/fragments/solution",{"_9":891,"_892":1003,"_894":1004},"/app/03.05.solution/test/",[896,897],{"_9":891,"_892":1006},"/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",[1009,1014,1019,1024,1029],{"_20":63,"_342":618,"_869":884,"_22":64,"_24":65,"_871":885,"_886":1010,"_889":1011,"_898":1013,"_901":902,"_466":530,"_477":514,"_9":475,"_903":67},[888],{"_9":891,"_892":893,"_894":1012},[896,897],{"_9":891,"_892":900},{"_20":71,"_342":620,"_869":918,"_22":72,"_24":73,"_871":919,"_886":1015,"_889":1016,"_898":1018,"_901":927,"_466":530,"_477":515,"_9":475,"_903":75},[921],{"_9":891,"_892":923,"_894":1017},[896,897],{"_9":891,"_892":926},{"_20":79,"_342":622,"_869":941,"_22":80,"_24":81,"_871":942,"_886":1020,"_889":1021,"_898":1023,"_901":950,"_466":530,"_477":530,"_9":475,"_903":83},[944],{"_9":891,"_892":946,"_894":1022},[896,897],{"_9":891,"_892":949},{"_20":87,"_342":624,"_869":964,"_22":88,"_24":89,"_871":965,"_886":1025,"_889":1026,"_898":1028,"_901":973,"_466":530,"_477":476,"_9":475,"_903":91},[967],{"_9":891,"_892":969,"_894":1027},[896],{"_9":891,"_892":972},{"_20":95,"_342":627,"_869":987,"_22":96,"_24":97,"_871":988,"_886":1030,"_889":1031,"_898":1033,"_901":996,"_466":530,"_477":626,"_9":475,"_903":99},[990],{"_9":891,"_892":992,"_894":1032},[896,897],{"_9":891,"_892":995},[1035,1040,1045,1050,1055],{"_20":67,"_342":618,"_869":905,"_22":68,"_24":69,"_871":906,"_886":1036,"_889":1037,"_898":1039,"_901":914,"_466":530,"_477":514,"_9":529,"_915":-5},[908],{"_9":891,"_892":910,"_894":1038},[896,897],{"_9":891,"_892":913},{"_20":75,"_342":620,"_869":929,"_22":76,"_24":77,"_871":930,"_886":1041,"_889":1042,"_898":1044,"_901":938,"_466":530,"_477":515,"_9":529,"_915":-5},[932],{"_9":891,"_892":934,"_894":1043},[896,897],{"_9":891,"_892":937},{"_20":83,"_342":622,"_869":952,"_22":84,"_24":85,"_871":953,"_886":1046,"_889":1047,"_898":1049,"_901":961,"_466":530,"_477":530,"_9":529,"_915":-5},[955],{"_9":891,"_892":957,"_894":1048},[896,897],{"_9":891,"_892":960},{"_20":91,"_342":624,"_869":975,"_22":92,"_24":93,"_871":976,"_886":1051,"_889":1052,"_898":1054,"_901":984,"_466":530,"_477":476,"_9":529,"_915":-5},[978],{"_9":891,"_892":980,"_894":1053},[896],{"_9":891,"_892":983},{"_20":99,"_342":627,"_869":998,"_22":100,"_24":101,"_871":999,"_886":1056,"_889":1057,"_898":1059,"_901":1007,"_466":530,"_477":626,"_9":529,"_915":-5},[1001],{"_9":891,"_892":1003,"_894":1058},[896,897],{"_9":891,"_892":1006},"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",1063],"exerciseFinished",{"_1066":1067,"_24":1068},"file","/myapp/workshop-content/exercises/03.using-jsx/FINISHED.mdx","exercises/03.using-jsx/FINISHED.mdx","prevStepLink",{"_1071":1072,"_1073":1074},"to","/exercise/03/05/solution","aria-label","Fragments (solution)","nextStepLink",{"_1071":1077,"_1073":651},"/exercise/04","actionData","errors"]

03. Using JSX/Elaboration