{"files":[{"path":"docs\/docs\/lists-and-keys.md","status":"M"}],"parents":["54dfe0b43caf52e9519787ac2dc8b1acb02f9d7e"],"body":"* Convert the Number component to ListItem\r\n\r\n* Add updated example CodePen\r\n\r\nAlso fixes typos.","commit":{"shortRevision":"7340fa9d93","authorEmail":"ragnar.valgeirsson@gmail.com","authoredAt":"2016-10-22T20:44:28+00:00","subject":"Convert the Number component to ListItem (#8039)","authorName":"Ragnar Þór Valgeirsson","revision":"7340fa9d933781747be0c3ac9850e264590fe5cd"},"patch":"diff --git a\/docs\/docs\/lists-and-keys.md b\/docs\/docs\/lists-and-keys.md\nindex 9279c83bd5..74ea0ab9cd 100644\n--- a\/docs\/docs\/lists-and-keys.md\n+++ b\/docs\/docs\/lists-and-keys.md\n@@ -42,7 +42,7 @@ ReactDOM.render(\n );\n ```\n \n-[Try it out on Codepen.](https:\/\/codepen.io\/gaearon\/pen\/GjPyQr?editors=0011)\n+[Try it out on CodePen.](https:\/\/codepen.io\/gaearon\/pen\/GjPyQr?editors=0011)\n \n This code displays a bullet list of numbers between 1 and 5.\n \n@@ -94,7 +94,7 @@ ReactDOM.render(\n );\n ```\n \n-[Try it out on Codepen.](https:\/\/codepen.io\/gaearon\/pen\/jrXYRR?editors=0011)\n+[Try it out on CodePen.](https:\/\/codepen.io\/gaearon\/pen\/jrXYRR?editors=0011)\n \n ## Keys\n \n@@ -136,12 +136,12 @@ We don't recommend using indexes for keys if the items can reorder, as that woul\n \n Keys only make sense in the context of the surrounding array.\n \n-For example, if you [extract](\/react\/docs\/components-and-props.html#extracting-components) a `Number` component, you should keep the key on the `` elements in the array rather than on the root `

` element in the `Number` itself.\n+For example, if you [extract](\/react\/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 root `

` element in the `ListItem` itself.\n \n **Example: Incorrect Key Usage**\n \n ```javascript{4,5,14,15}\n-function Number(props) {\n+function ListItem(props) {\n const value = props.value;\n return (\n \/\/ Wrong! There is no need to specify the key here:\n@@ -155,7 +155,7 @@ function NumberList(props) {\n const numbers = props.numbers;\n const listItems = numbers.map((item) =>\n \/\/ Wrong! The key should have been specified here:\n- \n+ \n );\n return (\n

{props.value}<\/li>;\n }\n@@ -183,8 +183,8 @@ function NumberList(props) {\n const numbers = props.numbers;\n const listItems = numbers.map((number) =>\n \/\/ Correct! Key should be specified inside the array.\n-
\n+
\n );\n return (\n

dillon1000/react

Files changed