How to fix Warning: Failed prop type: Type of prop 'age' supplied to 'Count' does not match expected type 'number'. Validation failed. in React

ReactBEGINNERMEDIUMUpdated Dec 10, 2025· 89 views

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.

Quick fix

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,
};
  1. Read the warning to identify the problematic prop
  2. Confirm what the component actually expects
  3. Normalize the data before you hand it to the child
  4. Relax the declared type when the mismatch is intentional
react — error
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.

What this error means

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.

Typical symptoms

  • Console warning: "Failed prop type: Type of prop 'age' supplied to 'Count' does not match expected type 'number'" plus the component stack trace.
  • The warning repeats each time the offending component renders with the bad data, making the console noisy in development.
  • UI next to that component may look wrong because it treats the value as the expected type (e.g., you cannot subtract from a string).
  • The stack trace points to `prop-types` because the runtime guard is the one emitting the warning.

Common causes

  1. Passing a primitive with the wrong type (for example, a string when the child expects a number or an object instead of an array).
  2. Loading JSON from an API or form and not converting fields before handing them to the component.
  3. The component’s PropTypes (or TypeScript interface backed by run-time guards) expect a `shape`, `arrayOf`, or specific primitive, but the new parent sends a different structure.
  4. defaultProps or initial state uses a value that violates the declared PropTypes.
  5. Copying a component but forgetting to keep its PropTypes in sync with the new props, so React still expects an outdated type.

How to fix "Warning: Failed prop type: Type of prop 'age' supplied to 'Count' does not match expected type 'number'. Validation failed."

1Read the warning to identify the problematic prop

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.

2Confirm what the component actually expects

Inspect Component.propTypes (or your TypeScript interface plus any runtime guard) to see the expected type. For example:

jsx
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.

3Normalize the data before you hand it to the child

If the parent receives a string from the API or a form, convert it before passing it down:

jsx
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.

4Relax the declared type when the mismatch is intentional

If the prop genuinely accepts multiple types, update your PropTypes definition to reflect the union:

jsx
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.

Advanced notes

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.

Frequently asked questions

What does "Warning: Failed prop type: Type of prop 'age' supplied to 'Count' does" mean?
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.
How do I fix "Warning: Failed prop type: Type of prop 'age' supplied to 'Count' does"?
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.
What causes "Warning: Failed prop type: Type of prop 'age' supplied to 'Count' does"?
Passing a primitive with the wrong type (for example, a string when the child expects a number or an object instead of an array). Loading JSON from an API or form and not converting fields before handing them to the component. The component’s PropTypes (or TypeScript interface backed by run-time guards) expect a shape, arrayOf, or specific primitive, but the new parent sends a different structure.
Is the "Warning: Failed prop type: Type of prop 'age' supplied to 'Count' does" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading