From 135dbcaedfc86f3608baa118378ab67994accfce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20Feje=C5=A1?= <ns.fejes.stefan@gmail.com>
Date: Mon, 15 Oct 2018 19:37:13 +0200
Subject: [PATCH] update mapped-table

---
 snippets/mapped-table.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/snippets/mapped-table.md b/snippets/mapped-table.md
index 892fa4915..6a55a17b2 100644
--- a/snippets/mapped-table.md
+++ b/snippets/mapped-table.md
@@ -2,25 +2,26 @@
 
 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 `value` properties or an array of primitives. Omit the `headers` prop to render a `table` without headers.
+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(props) {
+function MappedTable({ headers, data }) {
   return (
     <table>
       <thead>
-        {props.headers ? (
+        {headers && (
           <tr>
-            {props.headers.map((h, i) => (
+            {headers.map((h, i) => (
               <th key={i}>h</th>
             ))}
           </tr>
-        ) : null}
+        )}
       </thead>
       <tbody>
-        {props.data.map((v, i) =>
+        {data.map((v, i) =>
           (
             <tr obj={v} key={v.id ? v.id : i}>
+              <td>v.id</td>
               <td>v.name</td>
             </tr>
           );