React type checker creator itself should not be used as a prop type

  • REACT_MISUSED_CREATOR_IN_PROP_TYPES
  • Error
  • Medium
  • react

This rule applies when a React type checker creator itself is used as a prop type.

React type checker creator is a function type, so its return value should be used as a prop type.

Type checker creators supported in React are as follows:

  1. PropTypes.instanceOf
  2. PropTypes.oneOf
  3. PropTypes.oneOfType
  4. PropTypes.arrayOf
  5. PropTypes.objectOf
  6. PropTypes.shape

When the above React type checker creator is misused, type checking for the prop is ignored and React outputs a warning message.

Noncompliant Code Example

import React from 'react';
import PropTypes from 'prop-types';

class Hello extends React.Component {
    render() {
        return <div>{this.props.greetInfo.greetName}</div>;
    }
}

Hello.propTypes = {
    greetInfo: PropTypes.shape // REACT_MISUSED_CREATOR_IN_PROP_TYPES alarm because 'PropTypes.shape' is a type checker creator.
};

Compliant Code Example

import React from 'react';
import PropTypes from 'prop-types';

class Hello extends React.Component {
    render() {
        return <div>{this.props.greetInfo.greetName}</div>;
    }
}

Hello.propTypes = {
    greetInfo: PropTypes.shape({
        greetName: PropTypes.string
    })
};

Version

This rule was introduced in DeepScan 1.6.0-beta.

See

  • Typechecking With PropTypes

  • React Warning: type specification of prop is invalid; the type checker function must return null or an Error but returned a function. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).