Update and rename mapped-table.md to DataTable.md

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

snippets/mapped-table.md

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