React linter airbnb proptypes array

Question

I have the following PropTypes:

SmartTable.propTypes = {
  name: React.PropTypes.string.isRequired,
  cols: React.PropTypes.array.isRequired,
  rows: React.PropTypes.array.isRequired,
};

but the linter says me:

Prop type "array" is forbidden, how can I change it?

The question is what you want to change: The issue which the warning is trying to highlight, or just the warning itself? If the former, i.e. you do want to follow the best practices suggested by the eslint rule, the answer from @FacundoGFlores is correct, and you should make the types more specific. If you don't care about the issue, and just want to suppress the warning, then simply disable the rule. — Tomty, May 12 '20 at 09:45

score 68 · Accepted Answer · answered Jan 20 '17 at 19:49

68

A possible solution for this (but I think it is not smart):

SmartTable.propTypes = {
  name: React.PropTypes.string.isRequired,
  cols: React.PropTypes.arrayOf(React.PropTypes.string),
  rows: React.PropTypes.arrayOf(React.PropTypes.string),
};

answered Jan 20 '17 at 19:49

FacundoGFlores

7,858
12
64
94

5

Why is this not smart? In statically typed languages arrays are declared with the type they contain e.g. `string[]` or `MyObject[]` so it would make sense to tell `React.PropTypes` what type your array is. – bcr Jan 20 '17 at 20:40

JuzerK · Answer 2 · 2018-08-08T17:39:27.377

17

One of the solution which worked for me:

If you want arrays:

SmartTable.propTypes = {
  name: PropTypes.string.isRequired,
  cols: PropTypes.instanceOf(Array),
  rows: PropTypes.instanceOf(Array),
};

For Objects and Arrays, It can be:

SmartTable.propTypes = {
  name: PropTypes.string.isRequired,
  cols: PropTypes.instanceOf(Object),
  rows: PropTypes.instanceOf(Array),
};

edited Aug 08 '18 at 17:39

answered Aug 08 '18 at 13:05

JuzerK

194
1
3

2

It works, but it's bypassing the actual issue: The reason that eslint rule exists is so you don't have overly-general prop types that don't mean much (https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md). All this solution accomplishes is allow you to keep the overly-general types while implicitly disabling the warning. But if you really intend to ignore it, there's nothing stopping you from simply disabling the rule explicitly in your eslint config. – Tomty May 12 '20 at 09:39

score 11 · Answer 3 · edited Dec 02 '20 at 21:42

If the array of cols and rows are objects I like using shape so it could be something like this.

    SmartTable.propTypes = {
      name: PropTypes.string.isRequired,
      cols: PropTypes.arrayOf(PropTypes.shape({
        id: PropTypes.string.isRequired,
        value: PropTypes.string,
       })
      rows: PropTypes.arrayOf(PropTypes.shape({
        id: PropTypes.string.isRequired,
        value: PropTypes.string,
       })
};

score 9 · Answer 4 · answered Jul 09 '19 at 12:44

9

Short versions:

for Array PropTypes.shape([])

for Object PropTypes.shape({})

answered Jul 09 '19 at 12:44

Luka

129
1
5

score 0 · Answer 5 · edited Oct 18 '21 at 15:06

0

I found another way to get around the array forbidden error as well:

PropTypes.arrayOf(PropTypes.any.isRequired).isRequired

edited Oct 18 '21 at 15:06

SilentCloud

1,677
3
9
28

answered Oct 17 '21 at 00:13

Isabell

1

score -1 · Answer 6 · answered Jan 24 '20 at 21:55

-1

Just add comment eslint-disable-line

someVal: PropTypes.array, // eslint-disable-line

answered Jan 24 '20 at 21:55

Iryna Batvina

1,656
13
7

This is a good temporary solution, although not one that will work for those of us with clients that forbid this. There are reasons for eslint rules, unfortunately. – humans Feb 11 '21 at 18:41

React linter airbnb proptypes array

6 Answers6