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

alexanderwhatley picture alexanderwhatley  路  3Comments

Abdul-Hameed001 picture Abdul-Hameed001  路  3Comments

dwjft picture dwjft  路  3Comments

DaveyEdwards picture DaveyEdwards  路  3Comments

mellis481 picture mellis481  路  3Comments