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
+Compliant Code Example
 ...
     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.
+    <Person name="John" age={20} />,
     document.getElementById("root")
 );

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.

React component should receive prop values of correct propTypes

Noncompliant Code Example

Compliant Code Example

Version

See

Was this documentation helpful?

React component should receive prop values of correct `propTypes`