diff --git a/snippets/mapped-table.md b/snippets/mapped-table.md
index 6bb78a2e7..ee6e38509 100644
--- a/snippets/mapped-table.md
+++ b/snippets/mapped-table.md
@@ -1,22 +1,32 @@
### 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 `
` 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 `
` 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 (
-
- {props.headers ? return({props.headers.map((h, i)=> (| h | ))}
) : return null}
- {props.data.map((v, i) => {
- return (
-
- | v.name |
+
+
+ {props.headers ? (
+
+ {props.headers.map((h, i) => (
+ | h |
+ ))}
- );
- })}
-
+ ) : null}
+
+
+ {props.data.map((v, i) => {
+ return (
+
+ | v.name |
+
+ );
+ })}
+
+
);
}
```
@@ -30,6 +40,6 @@ ReactDOM.render(
);
```
-
+
-
+