eslint `forbid-prop-types` rule cause a warning in firefox console window

user_1258771 0
Viewed 5329

As the document says here

array and object can be replaced with arrayOf and shape, respectively.

So, I did this in my project:

class X extends React.Component {
....
}

X.propTypes = {
    somePorp: PropTypes.shape.isRequired, // this cause an warnning in firefox, but satisfied eslint syntax check
    somePorp: PropTypes.object.isRequired, // no warnning in firefox, but can not satisfy eslint syntax check
}

Question:

How can I avoid warning message in firefox, as well as pass eslint syntax check (it's better no modification of eslint default rule)?

BTW: firefox warning is something like below

Warning: Failed prop type: X: prop type classes is invalid; it must be a function, usually from the prop-types package, but received undefined.

eslint reactjs
2 Answers

You need to define the shape of the prop. If you're unsure, simply console.log() the prop and view it's make up. Click here to view the available PropType declarations.

For example, if you were to utilize redux store as this.props.store or history from react-router-dom as this.props.history:

enter image description here

history: PropTypes.objectOf(PropTypes.func).isRequired,       // object of funcs
store: PropTypes.shape({                                      // shape of...
  dispatch: PropTypes.func.isRequired,                          // func
  getState: PropTypes.func.isRequired,                          // func
  liftedStore: PropTypes.objectOf(PropTypes.func).isRequired,   // object of funcs
  replaceReducer: PropTypes.func.isRequired,                    // func
  subscribe: PropTypes.func.isRequired,                         // func
  Symbol: PropTypes.func.isRequired,                            // func
}).isRequired

Be careful when using isRequired, because sometimes the function/array/object/value/etc may or may not exist. For the example above, all of them should be present upon component mount.

user_73765260

You can also use the following way:

X.propTypes = {
    somePorp:  PropTypes.objectOf(PropTypes.object()),  
}
user_15762550
Related