fix MappedTable

snippets/mapped-table.md

@@ -1,14 +1,23 @@
 ### MappedTable
 
-Generate a table with dynamic rows based on passed array of data. Optionally include headers.
+Renders a table with rows dynamically created from an array of data.
 
-Conditionaly check weather to include table headers or not. Use `Array.prototype.map` to map over array of data and return `<tr>` for each entry.
+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.
 
 ```jsx
 function MappedTable(props) {
   return (
+    <table>
+      <thead>
+        {props.headers ? (
+          <tr>
+            {props.headers.map((h, i) => (
+              <th key={i}>h</th>
+            ))}
+          </tr>
+        ) : null}
+      </thead>
       <tbody>
-      {props.headers ? return(<tr>{props.headers.map((h, i)=> (<th key={i}>h</th>))}</tr>) : return null}
         {props.data.map((v, i) => {
           return (
             <tr obj={v} key={v.id ? v.id : i}>
@@ -17,6 +26,7 @@ function MappedTable(props) {
           );
         })}
       </tbody>
+    </table>
   );
 }
 ```
@@ -30,6 +40,6 @@ ReactDOM.render(
 );
 ```
 
-<!-- tags: (functional,array) -->
+<!-- tags: (array,functional) -->
 
-<!-- expertise: (0) -->
+<!-- expertise: (1) -->