React-table: Failing ESLint react/prop-types using arrow function in Cell of columns

Created on 22 Nov 2018  路  6Comments  路  Source: tannerlinsley/react-table

Describe the bug
When using an arrow function as Cell value in columns config, the props are failing ESLint react/prop-types rule.

To Reproduce
This is part of the columns value:

    const columns = [
        {
            id: 'completedDate',
            Header: 'Date Completed',
            accessor: record => moment(record.published_date, 'YYYY-MM-DDTHH:mm:ss')
                .format('YYYY-MM-DD hh:mm:ss a'),
            Cell: ({ value }) => (
                <div className="text-center">
                    <span style={{ lineHeight: '57px' }}>{value}</span>
                </div>
            ),
        }

This is my ESLint config:

{
  "extends": "airbnb",
  "env": {
    "browser": true
  },
  "parser": "babel-eslint",
  "plugins": [
    "babel",
    "jsx-a11y"
  ],
  "rules": {
    "indent": [
      "error",
      4
    ],
    "no-underscore-dangle": [
      "off"
    ],
    "babel/semi": 1,
    "react/jsx-indent": [
      "error",
      4
    ],
    "react/jsx-indent-props": [
      "error",
      4
    ],
    "jsx-a11y/label-has-for": "off",
    "jsx-a11y/label-has-associated-control": ["error", {
      "assert": "either"
    }]
  }
}

The value in columns.Cell arrow function is getting ESLint: 'value' is missing in props validation. (react/prop-types). The app works great. Just it doesn't pass ESLint.

Expected behavior
This is the way to use it as in the official website examples. It should pass the ESLint.

Most helpful comment

This seems to still be an issue. Any updates @tannerlinsley?

Also it's not for lack of props validation on a custom component: if you are rendering a simple <span> element the error still appears, immediately following the Cell: property for the function arguments

image

All 6 comments

Any update on this issue?

Any update please ...?

If your eslint config requires prop types for all react components, then you need to add prop types to your react component that you are using for custom cell rendering. This is not a bug with react-table. Your component is missing prop types.

I will accept a PR to add/update this functionality, or you can wait for v7 (a month or two). Thanks for the input!

This seems to still be an issue. Any updates @tannerlinsley?

Also it's not for lack of props validation on a custom component: if you are rendering a simple <span> element the error still appears, immediately following the Cell: property for the function arguments

image

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Paul6552 picture Paul6552  路  35Comments

ivanov-v picture ivanov-v  路  16Comments

larrybotha picture larrybotha  路  20Comments

BenMGilman picture BenMGilman  路  22Comments

Oskii2311 picture Oskii2311  路  46Comments