question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:8
  • Comments:8

github_iconTop GitHub Comments

5reactions
ErikAGriffincommented, May 7, 2020

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

4reactions
shermifycommented, Jan 17, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Failing ESLint react/prop-types using arrow function in Cell of ...
Describe the bug When using an arrow function as Cell value in columns config, the props are failing ESLint react/prop-types rule.
Read more >
reactjs - Prop in stateless component fat arrow function cannot ...
It seems as though when the fat arrow returns JSX, eslint fails. I can get around this by assigning bar to this :...
Read more >
'value' is missing in props validation - You.com | The AI Search ...
Describe the bug When using an arrow function as Cell value in columns config, the props are failing ESLint react/prop-types rule.
Read more >
GridComponent not refreshing - React - EJ 2 - Syncfusion
I have wrapped the GridComponent in a React functional component. The datasource is set by props. ... eslint-disable react/prop-types */.
Read more >
I Don't Hate Arrow Functions - David Walsh Blog
I released proper-arrows ESLint plugin with several configurable rules to control => arrow functions in your code base.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found