Update snippet formatting
This commit is contained in:
@ -7,13 +7,13 @@ Renders a table with rows dynamically created from an array of objects and a lis
|
||||
|
||||
- Use `Object.keys()`, `Array.prototype.filter()`, `Array.prototype.includes()` and `Array.prototype.reduce()` to produce a `filteredData` array, containing all objects with the keys specified in `propertyNames`.
|
||||
- Render a `<table>` element with a set of columns equal to the amount of values in `propertyNames`.
|
||||
- Use `Array.prototype.map` to render each value in the `propertyNames` array as a `<th>` element.
|
||||
- Use `Array.prototype.map` to render each object in the `filteredData` array as a `<tr>` element, containing a `<td>` for each key in the object.
|
||||
- Use `Array.prototype.map()` to render each value in the `propertyNames` array as a `<th>` element.
|
||||
- Use `Array.prototype.map()` to render each object in the `filteredData` array as a `<tr>` element, containing a `<td>` for each key in the object.
|
||||
|
||||
_This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`_
|
||||
|
||||
```jsx
|
||||
function MappedTable({ data, propertyNames }) {
|
||||
const MappedTable = ({ data, propertyNames }) => {
|
||||
let filteredData = data.map(v =>
|
||||
Object.keys(v)
|
||||
.filter(k => propertyNames.includes(k))
|
||||
@ -39,7 +39,7 @@ function MappedTable({ data, propertyNames }) {
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
```jsx
|
||||
|
||||
Reference in New Issue
Block a user