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.
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

This works https://github.com/yannickcr/eslint-plugin-react/issues/2404#issuecomment-529227876
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 theCell:property for the function arguments