Failing ESLint react/prop-types using arrow function in Cell of columns
See original GitHub issueDescribe 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:
- Created 5 years ago
- Reactions:8
- Comments:8
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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 theCell:
property for the function argumentsIf 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.