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