Error: Component definition is missing display name react/display-name

If you use the VirtualTable in a React TypeScript web application ESLint will throw an error when it checks the VirtuosoTableComponents.

Error: Component definition is missing display name react/display-name

The Virtuoso component uses arrow functions to declare the Scroller and TableBody. Arrow functions do not provide the displayName property used by developer tools. We can modify the component to use function definition, which automatically provides the displayName property.

The original example

const VirtuosoTableComponents: TableComponents<Data> = {
  Scroller: React.forwardRef<HTMLDivElement>((props, ref) => (
    <TableContainer component={Paper} {...props} ref={ref} />
  )),
  Table: (props) => (
    <Table {...props} sx={{ borderCollapse: 'separate', tableLayout: 'fixed' }} />
  ),
  TableHead,
  TableRow: ({ item: _item, ...props }) => <TableRow {...props} />,
  TableBody: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
    <TableBody {...props} ref={ref} />
  )),
};

We need to add function definitions and return statements to replace the arrow functions with function definitions.

Replace

(props, ref) =>

with

function myFunctionName (props, ref) {
    return
    ...
}

The corrected code

const VirtuosoTableComponents: TableComponents<Data> = {
  Scroller: React.forwardRef<HTMLDivElement>( function myScroller (props, ref) {
    return (
    <TableContainer component={Paper} {...props} ref={ref} />
  )}),
  Table: (props) => (
    <Table {...props} sx={{ borderCollapse: 'separate', tableLayout: 'fixed' }} />
  ),
  TableHead,
  TableRow: ({ item: _item, ...props }) => <TableRow {...props} />,
  TableBody: React.forwardRef<HTMLTableSectionElement>( function myTableBody (props, ref) {
    return (
    <TableBody {...props} ref={ref} />
  )}),
};