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.

Last updated on March 25, 2020