This warning occurs when a React component receives a prop that doesn't match its PropTypes definition. The actual prop type and expected type are mismatched, causing React to warn you during development.
React's PropTypes library validates that components receive the correct types of props. When you pass a prop with the wrong type—for example, a string instead of a number, or a JSX element instead of a function—React logs this warning. This is purely a development-time warning designed to catch bugs early. Common mismatches include passing an object when a function is expected, passing a JSX element instead of a component reference, or using the wrong PropTypes validator.
Open your browser's Developer Tools (F12 or right-click > Inspect). Look for the full warning message which will include the prop name, component name, expected type, and actual type received. For example:
Warning: Failed prop type: Invalid prop `count` of type `string` supplied to `Counter`, expected `number`.Check the component file where PropTypes is defined. Verify that the PropTypes validator matches what you're actually passing:
// Bad: expecting a number but receiving a string
MyComponent.propTypes = {
count: PropTypes.number,
};
// Calling with wrong type
<MyComponent count="5" /> // Should be count={5}Update either the PropTypes definition or the place where you call the component to match. The warning message will tell you what type is expected vs what was received:
// Option 1: Fix the PropTypes definition to accept multiple types
MyComponent.propTypes = {
count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
// Option 2: Fix the prop value to match expected type
<MyComponent count={5} /> // Pass number instead of stringIf you're passing a component as a prop, use PropTypes.elementType instead of PropTypes.func. This handles both function components and class components correctly, including those wrapped in React.memo:
MyRouter.propTypes = {
// Correct way to validate a component
component: PropTypes.elementType,
// Or for optional component
fallback: PropTypes.elementType.isRequired,
};If a prop can legitimately accept multiple types, use PropTypes.oneOfType:
Container.propTypes = {
// Can accept either a string or a number
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
// Can accept a function or a class component
renderer: PropTypes.oneOfType([
PropTypes.func,
PropTypes.elementType,
]),
};Use .isRequired to ensure required props are always provided:
UserCard.propTypes = {
username: PropTypes.string.isRequired, // Must be provided
email: PropTypes.string, // Optional
};PropTypes is a runtime validator that only works in development mode—it's stripped out during production builds for performance. For type safety in production, consider using TypeScript instead, which catches these issues at compile time. If you're using React 19 or later, TypeScript is the recommended approach as PropTypes support has been removed. For debugging complex prop mismatches, use console.log() to inspect the actual values being passed. When working with third-party components like React Router, check their documentation for the correct prop types—for example, Route expects a component reference, not a JSX element. If a component is wrapped in React.memo, make sure your PropTypes definition accounts for both the original component and any wrapper changes.
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