From a74d7277a074fdc46ac449fe37114f181bcb038c Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Thu, 29 Nov 2018 11:13:59 +0200
Subject: [PATCH] Update and rename mapped-table.md to DataTable.md

---
 snippets/DataTable.md    | 41 +++++++++++++++++++++++++++++++++++
 snippets/mapped-table.md | 46 ----------------------------------------
 2 files changed, 41 insertions(+), 46 deletions(-)
 create mode 100644 snippets/DataTable.md
 delete mode 100644 snippets/mapped-table.md

diff --git a/snippets/DataTable.md b/snippets/DataTable.md
new file mode 100644
index 000000000..73f85cae6
--- /dev/null
+++ b/snippets/DataTable.md
@@ -0,0 +1,41 @@
+### DataTable
+
+Renders a table with rows dynamically created from an array of data.
+
+Render a `<table>` element with two columns (`ID` and `Value`).
+Use `Array.prototype.map` to render every item in `data` as a `<tr>` element, consisting of its index and value, give it a `key` produced from the concatenation of the two.
+
+```jsx
+function DataTable({ data }) {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((val, i) =>
+          <tr key={`${i}_${val}`}>
+            <td>{i}</td>
+            <td>{val}</td>
+          </tr>
+        )}
+      </tbody>
+    </table>
+  );
+}
+```
+
+```jsx
+const people = ['John', 'Jesse'];
+ReactDOM.render(
+  <DataTable data={people} />,
+  document.getElementById('root')
+);
+```
+
+<!-- tags: array,functional -->
+
+<!-- expertise: 0 -->
diff --git a/snippets/mapped-table.md b/snippets/mapped-table.md
deleted file mode 100644
index eb8df3601..000000000
--- a/snippets/mapped-table.md
+++ /dev/null
@@ -1,46 +0,0 @@
-### MappedTable
-
-Renders a table with rows dynamically created from an array of data.
-
-Use the value of the `headers` prop to conditionally render a table with a header. Use `Array.prototype.map` to render every item in `data` as a `<tr>` element and give it a `key`. `data` can either be an array of objects with the `id` and `name` properties or an array of primitives. Omit the `headers` prop to render a `table` without headers.
-
-```jsx
-function MappedTable({ headers, data }) {
-  return (
-    <table>
-      <thead>
-        {headers && (
-          <tr>
-            {headers.map((h, i) => (
-              <th key={i}>h</th>
-            ))}
-          </tr>
-        )}
-      </thead>
-      <tbody>
-        {data.map((v, i) =>
-          (
-            <tr obj={v} key={v.id || i}>
-              <td>v.id</td>
-              <td>v.name</td>
-            </tr>
-          );
-        )}
-      </tbody>
-    </table>
-  );
-}
-```
-
-```jsx
-const people = [{ id: 841, name: 'John' }, { id: 241, name: 'Jesse' }];
-const headers = ['id', 'name'];
-ReactDOM.render(
-  <MappedTable data={people} headers={headers} />,
-  document.getElementById('root')
-);
-```
-
-<!-- tags: (array,functional) -->
-
-<!-- expertise: (1) -->