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) => ( + + ))} - ); - })} - + ) : null} + + + {props.data.map((v, i) => { + return ( + + + + ); + })} + +
h
v.name
); } ``` @@ -30,6 +40,6 @@ ReactDOM.render( ); ``` - + - +