CODEWITHSUNDEEP
javascriptreactjseslintmaterial-table
Bishonen_PL
Bishonen_PL

Reputation: 1571

eslint: Component Definition is missing displayName

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;

Upvotes: 4

Views: 7263

Answers (2)

Jair Lopez Gutierrez
Jair Lopez Gutierrez

Reputation: 174

You can disable file level this rule writting on the first line of the file:

/* eslint-disable react/display-name */

Upvotes: 0

buzatto
buzatto

Reputation: 10382

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

Upvotes: 10

Related Questions