eslint: Component Definition is missing displayName

Question

Using material-table (https://material-table.com/#/docs/features/component-overriding), I'm trying to override a certain component of a table. It renders just fine, but I'd like to get rid of the eslint error intellij throws at me without just ignoring/disabling it.

Erorr:

ESLint: Component definition is missing display name(react/display-name)

  ...
  return (
    <div className={classes.rootDiv}>
      <div className={classes.mainTableContainer}>
        <MainTable
          components={{
            Settings: (props) => <TableSettings name={'Steven'} {...props} /> // <- Error near (props)
          }}
          ...

Tablesettings

import React from 'react';

const TableSettings = (props) => {

  return (
    <div>
      <h1>Test</h1>
    </div>
  );
};

export default TableSettings;

Answer 1

to ignore this rule as you want, you need to set your .eslintrc.json as:

{
  // other configs...,
  "rules": {
    "react/display-name": "off"
  }
}

more about it