30:T417,{ const doc = md` You can build collections of elements and [include them in JSX](https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx) using curly braces \`{}\`. Below, we loop through the \`numbers\` array using the JavaScript [\`map()\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function. We return a \`\` element for each item. Finally, we assign the resulting array of elements to \`listItems\`: \`\`\`js const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) =>

{number}

); \`\`\` We include the entire \`listItems\` array inside a \`\` element, and [render it to the DOM](https://reactjs.org/docs/rendering-elements.html#rendering-an-element-into-the-dom): \`\`\`js ReactDOM.render(

{listItems}, document.getElementById('root') ); \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011) This code displays a bullet list of numbers between 1 and 5. `; return hide_display(option2, doc) }31:T574,{ const doc = md` Usually you would render lists inside a [component](https://reactjs.org/docs/components-and-props.html). We can refactor the previous example into a component that accepts an array of \`numbers\` and outputs a list of elements. \`\`\`js function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) =>

{number}

); return (

{listItems} ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') ); \`\`\` When you run this code, you’ll be given a warning that a key should be provided for list items. A “key” is a special string attribute you need to include when creating lists of elements. We’ll discuss why it’s important in the next section. Let’s assign a \`key\` to our list items inside \`numbers.map()\` and fix the missing key issue. \`\`\`js function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) =>

{number}

); return (

{listItems} ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') ); \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011) `; return hide_display(option3, doc); } 32:T60a,{ const doc = md` Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity: \`\`\`js const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) =>

{number}

); \`\`\` The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys: \`\`\`js const todoItems = todos.map((todo) =>

{todo.text}

); \`\`\` When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort: \`\`\`js const todoItems = todos.map((todo, index) => // Only do this if items have no stable IDs

{todo.text}

); \`\`\` We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny’s article for an [in-depth explanation on the negative impacts of using an index as a key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). If you choose not to assign an explicit key to list items then React will default to using indexes as keys. Here is an [in-depth explanation about why keys are necessary](https://reactjs.org/docs/reconciliation.html#recursing-on-children) if you’re interested in learning more. `; return hide_display(option4, doc); }33:T6d6,{ const doc = md` Keys only make sense in the context of the surrounding array. For example, if you [extract](https://reactjs.org/docs/components-and-props.html#extracting-components) a \`ListItem\` component, you should keep the key on the \`\` elements in the array rather than on the \`

\` element in the \`ListItem\` itself. **Example: Incorrect Key Usage** \`\`\`js function ListItem(props) { const value = props.value; return ( // Wrong! There is no need to specify the key here:

{value}

); } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => // Wrong! The key should have been specified here: ); return (

{listItems} ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') ); \`\`\` **Example: Correct Key Usage** \`\`\`js function ListItem(props) { // Correct! There is no need to specify the key here: return

{props.value}

; } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => // Correct! Key should be specified inside the array. ); return (

{listItems} ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') ); \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010) A good rule of thumb is that elements inside the \`map()\` call need keys. `; return hide_display(option5, doc); }34:T55e,{ const doc = md` Keys used within arrays should be unique among their siblings. However they don’t need to be globally unique. We can use the same keys when we produce two different arrays: \`\`\`js function Blog(props) { const sidebar = (

{post.title}

); const content = props.posts.map((post) =>

{post.title}

{post.content}

); return (

{sidebar}

{content}

); } const posts = [ {id: 1, title: 'Hello World', content: 'Welcome to learning React!'}, {id: 2, title: 'Installation', content: 'You can install React from npm.'} ]; ReactDOM.render( , document.getElementById('root') ); \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010) Keys serve as a hint to React but they don’t get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name: \`\`\`js const content = posts.map((post) => ); \`\`\` With the example above, the \`Post\` component can read \`props.id\`, but not \`props.key\`. `; return hide_display(option6, doc); }35:T4e1,{ const doc = md` In the examples above we declared a separate \`listItems\` variable and included it in JSX: \`\`\`js function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => ); return (

{listItems} ); } \`\`\` JSX allows [embedding any expression](https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx) in curly braces so we could inline the \`map()\` result: \`\`\`js function NumberList(props) { const numbers = props.numbers; return (

)}

); } \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010) Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the \`map()\` body is too nested, it might be a good time to [extract a component](https://reactjs.org/docs/components-and-props.html#extracting-components). `; return hide_display(option7, doc); }36:[] 2e:{"title":"Lists and Keys","cells":[{"id":0,"value":"TOC = {\n\n addList(\"TOC\", \"table of content\", 1);\n \n return md`# Lists and Keys\nhttps://reactjs.org/docs/lists-and-keys.html\n\n## Table of Content\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"toc = html`

\n ${d.id + \" =>\"}\n ${d.des}\n

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"listJS = {\n addList(\"listJS\", \"transform list in JS\", 2);\n return md`## transform list in Javascript`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof option1 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"{\n const doc = md `\n\nFirst, let’s review how you transform lists in JavaScript.\n\nGiven the code below, we use the [\\`map()\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function to take an array of \\`numbers\\` and double their values. We assign the new array returned by \\`map()\\` to the variable \\`doubled\\` and log it:\n\n\\`\\`\\`js\nconst numbers = [1, 2, 3, 4, 5];\nconst doubled = numbers.map((number) => number * 2);\nconsole.log(doubled);\n\\`\\`\\`\n\nThis code logs \\`[2, 4, 6, 8, 10]\\` to the console.\n\nIn React, transforming arrays into lists of [elements](https://reactjs.org/docs/rendering-elements.html) is nearly identical.\n\n\n`;\n return hide_display(option1, doc);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"{\n const numbers = [1, 2, 3, 4, 5];\n const doubled = numbers.map((number) => number * 2);\n return doubled;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"renderMultiple = {\n addList(\"renderMultiple\", \"Rendering Multiple Components\", 3);\n return md`### Rendering Multiple Components`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof option2 = DOM.select(none_doc);","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"{\n const root = html`

`;\n \n const numbers = [1, 2, 3, 4, 5];\n \n const listItems = numbers.map((number) =>\n htm`

${number}

`\n );\n\n ReactDOM.render(\n htm`

${listItems}`,\n root\n );\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"listComp = {\n addList(\"listComp\", \"Basic List Component\", 4);\n return md`### Basic List Component\nhttps://reactjs.org/docs/lists-and-keys.html#basic-list-component\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"viewof option3 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"{\n const root = html`

`;\n \n function NumberList(props) {\n const numbers = props.numbers;\n const listItems = numbers.map((number) =>\n htm`

${number}

`\n );\n return htm`\n

${listItems}\n `;\n }\n\n const numbers = [1, 2, 3, 4, 5];\n ReactDOM.render(\n htm`<${NumberList} numbers=${numbers} />`,\n root\n );\n \n return root; // option + cmd + j to see the warning message is gone\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"{\n const root = html`

`;\n // debugger;\n const exp = htm`

\n ${0}\n

`;\n \n function NumberList(props) {\n const numbers = props.numbers;\n const listItems = numbers.map((number) =>\n jsx`

\n ${number}\n

`\n );\n return jsx`\n

${listItems}\n `;\n }\n\n const numbers = [1, 2, 3, 4, 5];\n ReactDOM.render(\n jsx`<${NumberList} numbers=${numbers} />`,\n root\n );\n \n return root; // option + cmd + j to see the warning message\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"keys = {\n addList(\"keys\", \"understanding keys\", 5);\n return md`## Keys\nhttps://reactjs.org/docs/lists-and-keys.html#keys\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"viewof option4 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"noRender = {\n addList(\"extractKey\", \"Extracting Components with Keys\", 6);\n return md`\n### Extracting Components with Keys\nhttps://reactjs.org/docs/lists-and-keys.html#extracting-components-with-keys\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"viewof option5 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"{\n const root = html`

`;\n \n function ListItem(props) {\n // Correct! There is no need to specify the key here:\n return jsx`

${props.value}

`;\n }\n\n function NumberList(props) {\n const numbers = props.numbers;\n const listItems = numbers.map((number) =>\n // Correct! Key should be specified inside the array.\n jsx`<${ListItem} key=${number.toString()}\n value=${number} />`\n\n );\n return jsx`\n

\n ${listItems}\n \n `;\n }\n\n const numbers = [1, 2, 3, 4, 5];\n ReactDOM.render(\n jsx`<${NumberList} numbers=${numbers} />`,\n root\n );\n\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"{\n addList(\"\", \"\", 6);\n return md`\n### Keys Must Only Be Unique Among Siblings\nhttps://reactjs.org/docs/lists-and-keys.html#keys-must-only-be-unique-among-siblings\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"viewof option6 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"{\n const root = html`

`;\n \n function Blog(props) {\n const sidebar = jsx`\n

\n ${post.id + \" \" + post.title}\n

\n `;\n const content = props.posts.map((post) =>\n jsx`

${post.title}

${post.content}

\n `);\n \n return jsx`\n

\n ${sidebar}\n

\n ${content}\n

\n `;\n }\n\n const posts = [\n {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},\n {id: 2, title: 'Installation', content: 'You can install React from npm.'}\n ];\n ReactDOM.render(\n jsx`<${Blog} posts=${posts} />`,\n root\n );\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":555,"value":"mapJSX = {\n addList(\"mapJSX\", \"Embedding map() in JSX\", 7);\n return md`\n### Embedding map() in JSX\nhttps://reactjs.org/docs/lists-and-keys.html#embedding-map-in-jsx\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"viewof option7 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":554,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"utils = {\n addList(\"utils\", \"libs and methods required\", 8);\n return md`---\n## Utils`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"mutable list = [];","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"// toc = html`

\n// ${d.id + \" =>\"}\n// ${d.des}\n//

` ","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"html`\n \n ${d3.schemeCategory10.map((color, i) => html`\n \n \n \n `)}\n

#	Color	Swatch
${i}	${color}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"function addList(id, des, idx) {\n let list = mutable list;\n\n // feature: make sure no replicate of id\n if (list.filter(item => id === item.id).length > 0) {\n return ;// don't add anything to the list \n }\n list.push({id: id, des: des, idx: idx});\n mutable list = list;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":458,"value":" list.filter(item => \"utils\" === item.id)","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"// import {html, svg} from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { htm, none_doc, hide_display} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"import {React, ReactDOM, jsx } from \"@j-f1/react\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":511,"value":"jsx`

jsx

`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}