This warning fires whenever React’s runtime prop validation (PropTypes or a built-in DOM check) sees a prop whose actual type differs from the one you declared, so the offending component keeps running with the wrong data.
Fixes Warning: Failed prop type: Type of prop 'age' supplied to 'Count' does not match expected type 'number'. Validation failed.
const UserCard = ({ age }) => {
// ...
};
UserCard.propTypes = {
age: PropTypes.number.isRequired,
};const UserCard = ({ age }) => {// ...};UserCard.propTypes = {age: PropTypes.number.isRequired,};Warning: Failed prop type: Type of prop 'age' supplied to 'Count' does not match expected type 'number'. Validation failed.
React uses PropTypes (or, for some built-in props, internal validators) to compare the prop value you pass against the type you advertised. When those two types diverge, React raises "Type of prop does not match expected type" and logs the component stack so you can see which prop and component are affected. The component keeps rendering, but it will continue to treat the value as the expected type, so logic such as arithmetic on strings or access to missing fields will eventually fail.
The console message names the component (Count) and the prop (age) so you know exactly where to look. Open the React Developer Tools or the component file and cross-reference the name with the stack trace that follows the warning. The stack trace shows which render path triggered the validation, so you can pinpoint the parent that is passing the bad prop.
Inspect Component.propTypes (or your TypeScript interface plus any runtime guard) to see the expected type. For example:
const UserCard = ({ age }) => {
// ...
};
UserCard.propTypes = {
age: PropTypes.number.isRequired,
};If the definition has narrowed the type to a shape, arrayOf, or literal, make sure that declaration is still in sync with the latest props so React isn’t warning about an outdated expectation.
If the parent receives a string from the API or a form, convert it before passing it down:
const amountFromServer = user.wallet.balance;
const amount = Number(amountFromServer);
return <BalanceCard amount={amount} />;Use Number, JSON.parse, Boolean, or other helpers to coerce the value into the expected type. You can also guard with console.log(typeof prop) to verify what really arrives in development.
If the prop genuinely accepts multiple types, update your PropTypes definition to reflect the union:
PageTitle.propTypes = {
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
};For arrays of different shapes, use PropTypes.arrayOf plus PropTypes.oneOfType or write a custom validator. This keeps the validator aligned with the data you actually produce while still catching unexpected values.
PropTypes warnings run only in development builds, so the message disappears once you bundle for production, but fixing it is still important to avoid logical bugs. If you rely on TypeScript for compile-time safety, keep the runtime PropTypes in sync with the static types or drop them entirely and rely on PropTypes.checkPropTypes in tests. Custom validators allow you to inspect nested objects, enforce oneOf, or call PropTypes.instanceOf for class instances when the built-in helpers are not expressive enough.