tweak

Author: gaearon

beta/src/pages/learn/index.md

@@ -216,6 +216,60 @@ If you don't have the `else` branch, you can also use a shorter [logical `&&` sy
 
 If you're unfamiliar with this JavaScript syntax, you can start by always using `if...else`.
 
+## Rendering lists {/*rendering-lists*/}
+
+You will rely on JavaScript features like [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) and the [array `map()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to render lists of components.
+
+For example, let's say you have an array of products:
+
+```js
+const products = [
+  { title: 'Cabbage', id: 1 },
+  { title: 'Garlic', id: 2 },
+  { title: 'Apple', id: 3 },
+];
+```
+
+Inside your component, use the `map()` function to transform an array of products into an array of `<li>` items:
+
+```js
+const listItems = products.map(product =>
+  <li key={product.id}>
+    {product.title}
+  </li>
+);
+
+return (
+  <ul>{listItems}</ul>
+);
+```
+
+Notice how `<li>` has a `key` attribute. A key helps React figure out what happened when list items are inserted, removed, or reordered. Usually you should use a key from your data, such as a database ID. Keys should be unique among items in the same parent tag. Although you can technically specify index as a key, your list won't work correctly when items are inserted, removed, or reordered. Always try to use ID as a key if you can.
+
+<Sandpack>
+
+```js
+const products = [
+  { title: 'Cabbage', id: 1 },
+  { title: 'Garlic', id: 2 },
+  { title: 'Apple', id: 3 },
+];
+
+export default function ShoppingList() {
+  const listItems = products.map(product =>
+    <li key={product.id}>
+      {product.title}
+    </li>
+  );
+
+  return (
+    <ul>{listItems}</ul>
+  );
+}
+```
+
+</Sandpack>
+
 ## Responding to events {/*responding-to-events*/}
 
 You can respond to events by declaring event handler functions inside your components: