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.

Noncompliant Code Example

View with compliant examples side by side
import React from 'react';
import ReactDOM from 'react-dom';
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>;
  }
}

ReactDOM.render(
  <Person name="John" age="20" />, // REACT_MISMATCHED_TYPE_OF_PROP alarm because 'age' has `PropTypes.number` type.
  document.getElementById("root")
);

Compliant Code Example

View with noncompliant examples side by side
import React from 'react';
import ReactDOM from 'react-dom';
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>;
  }
}

ReactDOM.render(
  <Person name="John" age={20} />,
  document.getElementById("root")
);

Version

This rule was introduced in DeepScan 1.14.0-beta.

See

  • PropTypes

  • React Warning: Failed prop type: Invalid prop age of type string supplied to Person, expected number.

Was this documentation helpful?