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

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

@ -12,20 +12,25 @@ 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();
return (
<TableRow key={key} {...props} data-loading>
{headerGroup.headers.map((column: HeaderGroup<T>) => { {headerGroup.headers.map((column: HeaderGroup<T>) => {
const content = column.render('Header'); const content = column.render('Header');
const { key, ...props } = column.getHeaderProps(
column.canSort
? column.getSortByToggleProps()
: undefined,
);
return ( return (
<CellSortable <CellSortable
// @ts-expect-error -- check after `react-table` v8 // @ts-expect-error -- check after `react-table` v8
styles={column.styles || {}} styles={column.styles || {}}
{...column.getHeaderProps( key={key}
column.canSort {...props}
? column.getSortByToggleProps()
: undefined,
)}
ariaTitle={ ariaTitle={
typeof content === 'string' typeof content === 'string'
? content ? content
@ -47,6 +52,7 @@ export const SortableTableHeader = <T extends object>({
); );
})} })}
</TableRow> </TableRow>
))} );
})}
</TableHead> </TableHead>
); );

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

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