fix(ffe-tables-react): Properly handle zero as row id

SpareBank1 · Jan 9, 2018 · 8c8cc67 · 8c8cc67
1 parent 8447146
commit 8c8cc67
Showing 1 changed file with 14 additions and 26 deletions.
diff --git a/packages/ffe-tables-react/src/Table/Table.js b/packages/ffe-tables-react/src/Table/Table.js
@@ -68,39 +68,28 @@ class Table extends Component {
         }
 
         if (expandedContentMapper) {
-            return data.map((row, index) => (
-                <TableRowExpandable
-                    cells={row}
-                    columns={columns}
-                    key={row.id || index}
-                    sort={sort}
-                >
-                    {expandedContentMapper(row)}
-                </TableRowExpandable>
-            ));
+            return data.map((row, index) => {
+                const key = row.id || row.id === 0 ? row.id.toString() : index;
+                return (
+                    <TableRowExpandable cells={row} columns={columns} key={key} sort={sort}>
+                        {expandedContentMapper(row)}
+                    </TableRowExpandable>
+                );
+            });
         }
 
         return (
             <tbody>
-                {data.map((row, index) => (
-                    <TableRow
-                        cells={row}
-                        columns={columns}
-                        key={row.id || index}
-                    />
-                ))}
+                {data.map((row, index) => {
+                    const key = row.id || row.id === 0 ? row.id.toString() : index;
+                    return <TableRow cells={row} columns={columns} key={key} />;
+                })}
             </tbody>
         );
     }
 
     render() {
-        const {
-            alignLeft,
-            condensed,
-            smallHeader,
-            columnLayoutMobile,
-            breakpoint,
-        } = this.props;
+        const { alignLeft, condensed, smallHeader, columnLayoutMobile, breakpoint } = this.props;
         return (
             <table
                 className={classNames(
@@ -109,8 +98,7 @@ class Table extends Component {
                     { 'ffe-table--small-header': smallHeader },
                     { 'ffe-table--columns-sm': columnLayoutMobile },
                     { 'ffe-table--text-left': alignLeft },
-                    breakpoint &&
-                        `ffe-table--breakpoint-${this.props.breakpoint}`,
+                    breakpoint && `ffe-table--breakpoint-${this.props.breakpoint}`,
                 )}
             >
                 {this.renderTableCaption()}