Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-13 11:17:26 +02: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; flex?: boolean;
}) => ( }) => (
<TableHead className={className}> <TableHead className={className}>
{headerGroups.map((headerGroup) => ( {headerGroups.map((headerGroup) => {
<TableRow {...headerGroup.getHeaderGroupProps()} data-loading> const { key, ...props } = headerGroup.getHeaderGroupProps();
{headerGroup.headers.map((column: HeaderGroup<T>) => { return (
const content = column.render('Header'); <TableRow key={key} {...props} data-loading>
{headerGroup.headers.map((column: HeaderGroup<T>) => {
const content = column.render('Header');
return ( const { key, ...props } = column.getHeaderProps(
<CellSortable column.canSort
// @ts-expect-error -- check after `react-table` v8 ? column.getSortByToggleProps()
styles={column.styles || {}} : undefined,
{...column.getHeaderProps( );
column.canSort
? column.getSortByToggleProps() return (
: undefined, <CellSortable
)} // @ts-expect-error -- check after `react-table` v8
ariaTitle={ styles={column.styles || {}}
typeof content === 'string' key={key}
? content {...props}
: undefined ariaTitle={
} typeof content === 'string'
isSortable={Boolean(column.canSort)} ? content
isSorted={column.isSorted} : undefined
isDescending={column.isSortedDesc} }
maxWidth={column.maxWidth} isSortable={Boolean(column.canSort)}
minWidth={column.minWidth} isSorted={column.isSorted}
width={column.width} isDescending={column.isSortedDesc}
isFlex={flex} maxWidth={column.maxWidth}
isFlexGrow={Boolean(column.minWidth)} minWidth={column.minWidth}
// @ts-expect-error -- check after `react-table` v8 width={column.width}
align={column.align} isFlex={flex}
> isFlexGrow={Boolean(column.minWidth)}
{content} // @ts-expect-error -- check after `react-table` v8
</CellSortable> align={column.align}
); >
})} {content}
</TableRow> </CellSortable>
))} );
})}
</TableRow>
);
})}
</TableHead> </TableHead>
); );

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

@ -89,27 +89,27 @@ export const VirtualizedTable = <T extends object>({
prepareRow(row); prepareRow(row);
const { key, ...props } = row.getRowProps({
style: { display: 'flex', top },
});
return ( return (
<TableRow <TableRow {...props} hover key={key || row.id}>
hover {row.cells.map((cell) => {
{...row.getRowProps({ const { key, ...props } = cell.getCellProps({
style: { display: 'flex', top }, 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> </TableRow>
); );
})} })}