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?

Bara

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 @Bara 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. – Berny

Answer 1

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),
};

Bara

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

Answer 2

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),
};

Breeder

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 (github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/…). 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. – Berny

Answer 3

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,
       })
};

Fairy

Answer 4

Short versions:

for Array PropTypes.shape([])

for Object PropTypes.shape({})

Aglimmer

Answer 5

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

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

Bloater

Answer 6

Just add comment eslint-disable-line

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

Fourfold

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