2

I'm currently going through an eslint upgrade of our existing React codebase. As part of the updated Eslint rules, we need to start being more specific about our PropTypes. (Don't use PropTypes.object, PropTypess.array)

I can't refactor very much, as it's out of the scope of what I'm doing right now.

Currently there's an array of arrays being passed as a prop to a component which generates a table.

Data looks like:

[ [ 'firstName', 'lastName', 35, 'M', 1, '' ],
  [ 'firstName', 'lastName', 34, 'F', 1, '' ] ]

Ideally I would change this to an array of objects where I can validate each key:value individually, but this piece of data is very involved, so I can't change it.

Here's what I want to do:

tableData: PropTypes.arrayOf(
  PropTypes.arrayOf(
    PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number
    ])
  )
)

However, react keeps giving me this error:

Warning: Failed prop type: Invalid prop 'tableData[0][2]' supplied to 'MyComponent'

I've tried doing something like this too:

tableData: PropTypes.arrayOf(
  PropTypes.arrayOf(
    PropTypes.string,
    PropTypes.string,
    PropTypes.number,
    PropTypes.string,
    PropTypes.number,
    PropTypes.string
  ) 
)

But that also didn't work.

Do I need to create my own PropType validator? I'd really like to avoid that, especially because I feel like my methods should be working.

Brandon Sturgeon
  • 223
  • 4
  • 13
  • 1
    what version of react are you using? I tested in a project using 15.4.0 and it works fine. I was even able to make it error by supplying a bool in one of the inner arrays – Frank Jan 05 '17 at 14:13
  • @Frank I'm very confused. I tried switching up the versions, but I had `^15.1.0` in my package.json, and the version installed in node_modules/ was `15.4.1`, so I had the latest version. I tried running it again and it miraculously worked. Problem solved I guess?... – Brandon Sturgeon Jan 05 '17 at 16:03
  • 1
    I think you are good, that ^ in front of the version means [get me the latest](http://stackoverflow.com/questions/22343224/whats-the-difference-between-tilde-and-caret-in-package-json). As for it working magically great, one less thing to worry about now :) – Frank Jan 05 '17 at 16:37

0 Answers0