var Component=(()=>{var b=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var u=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var l in e)s(a,l,{get:e[l],enumerable:!0})},t=(a,e,l,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!v.call(a,r)&&r!==l&&s(a,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return a};var w=(a,e,l)=>(l=a!=null?b(y(a)):{},t(e||!a||!a.__esModule?s(l,"default",{value:a,enumerable:!0}):l,a)),k=a=>t(s({},"__esModule",{value:!0}),a);var i=u((T,c)=>{c.exports=_jsx_runtime});var x={};g(x,{default:()=>h,frontmatter:()=>f});var n=w(i()),f=void 0;function d(a){let e={code:"code",h1:"h1",p:"p",pre:"pre",span:"span",...a.components},{EpicVideo:l}=e;return l||N("EpicVideo",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:"Rendering Arrays"}),` `,(0,n.jsx)(l,{url:"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-rendering-arrays"}),` `,(0,n.jsxs)(e.p,{children:["One of the more tricky things with React is the requirement of a ",(0,n.jsx)(e.code,{children:"key"}),` prop when you attempt to render a list of elements.`]}),` `,(0,n.jsx)(e.p,{children:"If we want to render a list like this, then there's no problem:"}),` `,(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(--base0A)"},children:"const"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"ui"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," (",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"ul"}),">",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"li"}),">One",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"li"}),">Two",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"li"}),">Three",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"6",children:[" ",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7",children:[")",` `]})]})}),` `,(0,n.jsx)(e.p,{children:"But rendering an array of elements is very common:"}),` `,(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(--base0A)"},children:"const"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"list"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," [","'",(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"One"}),"'",", ","'",(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"Two"}),"'",", ","'",(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"Three"}),"'","]",` `]}),(0,n.jsx)(e.span,{className:"codeblock-line","data-line-number":"2",children:` `}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"ui"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," (",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"ul"}),">",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"list"}),".",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"map"}),"(",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"listItem"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," (",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"6",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"li"}),">",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"listItem"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),"",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7",children:[" ))",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"8",children:[" ",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"9",children:[")",` `]})]})}),` `,(0,n.jsx)(e.p,{children:`Those will generate the same HTML, but what it actually does is slightly different. Let's re-write it to see that difference:`}),` `,(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(--base0A)"},children:"const"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"list"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," [","'",(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"One"}),"'",", ","'",(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"Two"}),"'",", ","'",(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"Three"}),"'","]",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"listUI"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"list"}),".",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"map"}),"(",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"listItem"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"li"}),">",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"listItem"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),")",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[(0,n.jsx)(e.span,{style:{color:"var(--base03)"},children:"// notice that listUI is an array"}),` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"ui"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"ul"}),">",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"listUI"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),"",` `]})]})}),` `,(0,n.jsx)(e.p,{children:`So we're interpolating an array of renderable elements. This is totally acceptable, but it has interesting implications for when things change over time.`}),` `,(0,n.jsx)(e.p,{children:`We haven't covered things changing over time yet, but this warning's going to show up any time you render an array regardless of whether that array changes so we're going to address that here.`}),` `,(0,n.jsx)(e.p,{children:`If you were to somehow update that list with an added item and tell React to update the UI, React doesn't really know whether you added an item in the middle, beginning, or end. And the same goes for when you remove an item (it doesn't know whether that changes is in the middle, beginning, or end either). Or maybe you removed them all and replaced them with completely new values. React just doesn't have enough information to know what to do about what you've done to the array.`}),` `,(0,n.jsxs)(e.p,{children:["In simple cases (like the ",(0,n.jsx)(e.code,{children:"One"}),", ",(0,n.jsx)(e.code,{children:"Two"}),", ",(0,n.jsx)(e.code,{children:"Three"}),` example above), it's not a big deal, because React's best-guess works out ok. However, if any of those React elements represent a component that is maintaining state, that can be pretty problematic, which this exercise demonstrates.`]})]})}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 k(x);})(); ;return Component;

10. Rendering Arrays/Elaboration