From 46215fafb6b3122f103a10e01443c942c31ee1ff Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Sat, 13 Oct 2018 12:42:58 +0300
Subject: [PATCH 1/6] Add MappedList

---
 snippets/MappedList.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 snippets/MappedList.md

diff --git a/snippets/MappedList.md b/snippets/MappedList.md
new file mode 100644
index 000000000..bcec0f75f
--- /dev/null
+++ b/snippets/MappedList.md
@@ -0,0 +1,31 @@
+### MappedList
+
+Renders a list of elements from an array of data.
+
+Use the value of the `isOrderedList` prop to conditionally render a `<ol>` or `<ul>` list.
+Use `Array.prototype.map` to render every item in `data` as a `<li>` element and give it a `key`.
+`data` can either be an array of objects with the `id` and `value` properties or an array of primitives.
+Omit the `isOrderedList` prop to render a `<ul>` list by default.
+
+```jsx
+function MappedList(props) {
+  return props.isOrderedList ?
+    <ol>
+      {props.data.map((v,i) => <li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>)}
+    </ol> :
+    <ul>
+      {props.data.map((v,i) => <li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>)}
+    </ul>
+};
+```
+
+```jsx
+const names = ['John', 'Paul', 'Mary'];
+ReactDOM.render(<MappedList data={names}/>, document.getElementById('root'));
+const users = [ { id: 8, value: 'john' }, { id: 3, value: 'paul' }];
+ReactDOM.render(<MappedList data={users} isOrderedList/>, document.getElementById('root'));
+```
+
+<!-- tags: array,functional -->
+
+<!-- expertise: 1 -->

From dd36421e238aa379e50fc9232849747eb12c6e9d Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Sat, 13 Oct 2018 12:48:53 +0300
Subject: [PATCH 2/6] Formatting for MappedList

---
 snippets/MappedList.md | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/snippets/MappedList.md b/snippets/MappedList.md
index bcec0f75f..ca7eba5a6 100644
--- a/snippets/MappedList.md
+++ b/snippets/MappedList.md
@@ -9,21 +9,30 @@ Omit the `isOrderedList` prop to render a `<ul>` list by default.
 
 ```jsx
 function MappedList(props) {
-  return props.isOrderedList ?
+  return props.isOrderedList ? (
     <ol>
-      {props.data.map((v,i) => <li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>)}
-    </ol> :
+      {props.data.map((v, i) => (
+        <li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>
+      ))}
+    </ol>
+  ) : (
     <ul>
-      {props.data.map((v,i) => <li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>)}
+      {props.data.map((v, i) => (
+        <li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>
+      ))}
     </ul>
-};
+  );
+}
 ```
 
 ```jsx
 const names = ['John', 'Paul', 'Mary'];
 ReactDOM.render(<MappedList data={names}/>, document.getElementById('root'));
 const users = [ { id: 8, value: 'john' }, { id: 3, value: 'paul' }];
-ReactDOM.render(<MappedList data={users} isOrderedList/>, document.getElementById('root'));
+ReactDOM.render(
+  <MappedList data={users} isOrderedList />,
+  document.getElementById('root')
+);
 ```
 
 <!-- tags: array,functional -->

From 5b077a0c77352d29c02246ab297ccaa10d3af0d0 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Wed, 17 Oct 2018 10:13:11 +0300
Subject: [PATCH 3/6] Update MappedList.md

---
 snippets/MappedList.md | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/snippets/MappedList.md b/snippets/MappedList.md
index ca7eba5a6..17b9bba5f 100644
--- a/snippets/MappedList.md
+++ b/snippets/MappedList.md
@@ -8,20 +8,11 @@ Use `Array.prototype.map` to render every item in `data` as a `<li>` element and
 Omit the `isOrderedList` prop to render a `<ul>` list by default.
 
 ```jsx
-function MappedList(props) {
-  return props.isOrderedList ? (
-    <ol>
-      {props.data.map((v, i) => (
-        <li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>
-      ))}
-    </ol>
-  ) : (
-    <ul>
-      {props.data.map((v, i) => (
-        <li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>
-      ))}
-    </ul>
-  );
+function MappedList({ isOrderedList, data}) {
+  const list = data.map((v, i) => (
+    <li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>
+  ));
+  return isOrderedList ? <ol>{list}</ol> : <ul>{list}</ul>;
 }
 ```
 

From fc726d85a676d39f73169309fe851a62ea7d48a2 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Wed, 17 Oct 2018 10:13:33 +0300
Subject: [PATCH 4/6] Update MappedList.md

---
 snippets/MappedList.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/snippets/MappedList.md b/snippets/MappedList.md
index 17b9bba5f..b3b1c9c2a 100644
--- a/snippets/MappedList.md
+++ b/snippets/MappedList.md
@@ -8,7 +8,7 @@ Use `Array.prototype.map` to render every item in `data` as a `<li>` element and
 Omit the `isOrderedList` prop to render a `<ul>` list by default.
 
 ```jsx
-function MappedList({ isOrderedList, data}) {
+function MappedList({ isOrderedList, data }) {
   const list = data.map((v, i) => (
     <li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>
   ));

From 8b54ea0cda1cf72f9753b8df9a73416b0c41f37f Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Wed, 17 Oct 2018 20:31:22 +0300
Subject: [PATCH 5/6] Update MappedList.md

---
 snippets/MappedList.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/snippets/MappedList.md b/snippets/MappedList.md
index b3b1c9c2a..2d79ced35 100644
--- a/snippets/MappedList.md
+++ b/snippets/MappedList.md
@@ -2,17 +2,17 @@
 
 Renders a list of elements from an array of data.
 
-Use the value of the `isOrderedList` prop to conditionally render a `<ol>` or `<ul>` list.
+Use the value of the `isOrdered` prop to conditionally render a `<ol>` or `<ul>` list.
 Use `Array.prototype.map` to render every item in `data` as a `<li>` element and give it a `key`.
 `data` can either be an array of objects with the `id` and `value` properties or an array of primitives.
-Omit the `isOrderedList` prop to render a `<ul>` list by default.
+Omit the `isOrdered` prop to render a `<ul>` list by default.
 
 ```jsx
-function MappedList({ isOrderedList, data }) {
+function MappedList({ isOrdered, data }) {
   const list = data.map((v, i) => (
     <li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>
   ));
-  return isOrderedList ? <ol>{list}</ol> : <ul>{list}</ul>;
+  return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;
 }
 ```
 
@@ -21,7 +21,7 @@ const names = ['John', 'Paul', 'Mary'];
 ReactDOM.render(<MappedList data={names}/>, document.getElementById('root'));
 const users = [ { id: 8, value: 'john' }, { id: 3, value: 'paul' }];
 ReactDOM.render(
-  <MappedList data={users} isOrderedList />,
+  <MappedList data={users} isOrdered />,
   document.getElementById('root')
 );
 ```

From 57ec6d4b6886eac4ace74a63206a24b9e0c2f1cc Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Thu, 29 Nov 2018 12:12:24 +0200
Subject: [PATCH 6/6] Simplify MappedList and rename to DataList

---
 snippets/DataList.md   | 26 ++++++++++++++++++++++++++
 snippets/MappedList.md | 31 -------------------------------
 2 files changed, 26 insertions(+), 31 deletions(-)
 create mode 100644 snippets/DataList.md
 delete mode 100644 snippets/MappedList.md

diff --git a/snippets/DataList.md b/snippets/DataList.md
new file mode 100644
index 000000000..99ee8980b
--- /dev/null
+++ b/snippets/DataList.md
@@ -0,0 +1,26 @@
+### DataList
+
+Renders a list of elements from an array of primitives.
+
+Use the value of the `isOrdered` prop to conditionally render a `<ol>` or `<ul>` list.
+Use `Array.prototype.map` to render every item in `data` as a `<li>` element, give it a `key` produced from the concatenation of the its index and value.
+Omit the `isOrdered` prop to render a `<ul>` list by default.
+
+```jsx
+function DataList({ isOrdered, data }) {
+  const list = data.map((val, i) => (
+    <li key={`${i}_${val}`}>{val}</li>
+  ));
+  return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;
+}
+```
+
+```jsx
+const names = ['John', 'Paul', 'Mary'];
+ReactDOM.render(<DataList data={names}/>, document.getElementById('root'));
+ReactDOM.render(<DataList data={names} isOrdered/>, document.getElementById('root'));
+```
+
+<!-- tags: array,functional -->
+
+<!-- expertise: 0 -->
diff --git a/snippets/MappedList.md b/snippets/MappedList.md
deleted file mode 100644
index 2d79ced35..000000000
--- a/snippets/MappedList.md
+++ /dev/null
@@ -1,31 +0,0 @@
-### MappedList
-
-Renders a list of elements from an array of data.
-
-Use the value of the `isOrdered` prop to conditionally render a `<ol>` or `<ul>` list.
-Use `Array.prototype.map` to render every item in `data` as a `<li>` element and give it a `key`.
-`data` can either be an array of objects with the `id` and `value` properties or an array of primitives.
-Omit the `isOrdered` prop to render a `<ul>` list by default.
-
-```jsx
-function MappedList({ isOrdered, data }) {
-  const list = data.map((v, i) => (
-    <li key={v.id ? v.id : i}>{v.value ? v.value : v}</li>
-  ));
-  return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;
-}
-```
-
-```jsx
-const names = ['John', 'Paul', 'Mary'];
-ReactDOM.render(<MappedList data={names}/>, document.getElementById('root'));
-const users = [ { id: 8, value: 'john' }, { id: 3, value: 'paul' }];
-ReactDOM.render(
-  <MappedList data={users} isOrdered />,
-  document.getElementById('root')
-);
-```
-
-<!-- tags: array,functional -->
-
-<!-- expertise: 1 -->