Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

fix: avoid react key warnings in tables (#7694)

Browse Source 
Refactoring to get rid of `A props object containing a "key" prop is being spread into JSX` warning
This commit is contained in:
Tymoteusz Czech 2024-07-30 13:09:12 +02:00 committed by GitHub
parent c828d01135
commit b585ead6df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 60 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
View File

@ -12,41 +12,47 @@ export const SortableTableHeader = <T extends object>({
flex?: boolean;
}) => (
<TableHead className={className}>
{headerGroups.map((headerGroup) => (
<TableRow {...headerGroup.getHeaderGroupProps()} data-loading>
{headerGroup.headers.map((column: HeaderGroup<T>) => {
const content = column.render('Header');
{headerGroups.map((headerGroup) => {
const { key, ...props } = headerGroup.getHeaderGroupProps();
return (
<TableRow key={key} {...props} data-loading>
{headerGroup.headers.map((column: HeaderGroup<T>) => {
const content = column.render('Header');
return (
<CellSortable
// @ts-expect-error -- check after `react-table` v8
styles={column.styles || {}}
{...column.getHeaderProps(
column.canSort
? column.getSortByToggleProps()
: undefined,
)}
ariaTitle={
typeof content === 'string'
? content
: undefined
}
isSortable={Boolean(column.canSort)}
isSorted={column.isSorted}
isDescending={column.isSortedDesc}
maxWidth={column.maxWidth}
minWidth={column.minWidth}
width={column.width}
isFlex={flex}
isFlexGrow={Boolean(column.minWidth)}
// @ts-expect-error -- check after `react-table` v8
align={column.align}
>
{content}
</CellSortable>
);
})}
</TableRow>
))}
const { key, ...props } = column.getHeaderProps(
column.canSort
? column.getSortByToggleProps()
: undefined,
);
return (
<CellSortable
// @ts-expect-error -- check after `react-table` v8
styles={column.styles || {}}
key={key}
{...props}
ariaTitle={
typeof content === 'string'
? content
: undefined
}
isSortable={Boolean(column.canSort)}
isSorted={column.isSorted}
isDescending={column.isSortedDesc}
maxWidth={column.maxWidth}
minWidth={column.minWidth}
width={column.width}
isFlex={flex}
isFlexGrow={Boolean(column.minWidth)}
// @ts-expect-error -- check after `react-table` v8
align={column.align}
>
{content}
</CellSortable>
);
})}
</TableRow>
);
})}
</TableHead>
);

38
frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.tsx
View File

@ -89,27 +89,27 @@ export const VirtualizedTable = <T extends object>({
prepareRow(row);
const { key, ...props } = row.getRowProps({
style: { display: 'flex', top },
});
return (
<TableRow
hover
{...row.getRowProps({
style: { display: 'flex', top },
<TableRow {...props} hover key={key || row.id}>
{row.cells.map((cell) => {
const { key, ...props } = cell.getCellProps({
style: {
flex: cell.column.minWidth
? '1 0 auto'
: undefined,
},
});
return (
<TableCell key={key} {...props}>
{cell.render('Cell')}
</TableCell>
);
})}
key={row.id}
>
{row.cells.map((cell) => (
<TableCell
{...cell.getCellProps({
style: {
flex: cell.column.minWidth
? '1 0 auto'
: undefined,
},
})}
>
{cell.render('Cell')}
</TableCell>
))}
</TableRow>
);
})}