Simplify MappedList and rename to DataList

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 -->

snippets/MappedList.md

@@ -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 -->