diff --git a/snippets/DataTable.md b/snippets/DataTable.md new file mode 100644 index 000000000..93dfce73e --- /dev/null +++ b/snippets/DataTable.md @@ -0,0 +1,41 @@ +### DataTable + +Renders a table with rows dynamically created from an array of primitives. + +Render a `` element with two columns (`ID` and `Value`). +Use `Array.prototype.map` to render every item in `data` as a `` element, consisting of its index and value, give it a `key` produced from the concatenation of the two. + +```jsx +function DataTable({ data }) { + return ( +
+ + + + + + + + {data.map((val, i) => + + + + + )} + +
IDValue
{i}{val}
+ ); +} +``` + +```jsx +const people = ['John', 'Jesse']; +ReactDOM.render( + , + document.getElementById('root') +); +``` + + + +