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.
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.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite