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 sideimport 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 sideimport 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
React Warning: Failed prop type: Invalid prop
age
of typestring
supplied toPerson
, expectednumber
.