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

View with compliant examples side by side
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

View with noncompliant examples side by side
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).