React component should receive prop values of correct propTypes

  • REACT_MISMATCHED_TYPE_OF_PROP
  • Error
  • Medium
  • react

This rule applies when a React component receives a prop value which does not match its propTypes declaration.

When a React component receives such a prop value, React outputs a warning message.

Note: This rule is based on React 17 API specifications.

Noncompliant Code Example

View with compliant examples side by side
import React from 'react';
import PropTypes from 'prop-types';

class Person extends React.Component {
  static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number
  };
  render() {
    return <div>{this.props.name} is {this.props.age} years old</div>;
  }
}

export class App extends React.Component {
  render() {
    return <Person name="John" age="20" />; // REACT_MISMATCHED_TYPE_OF_PROP alarm because 'age' has `PropTypes.number` type.
  }
}

Compliant Code Example

View with noncompliant examples side by side
import React from 'react';
import PropTypes from 'prop-types';

class Person extends React.Component {
  static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number
  };
  render() {
    return <div>{this.props.name} is {this.props.age} years old</div>;
  }
}

export class App extends React.Component {
  render() {
    return <Person name="John" age={20} />;
  }
}

Version

This rule was introduced in DeepScan 1.14.0-beta.

See

Was this documentation helpful?