How to fix Warning: Failed prop type: Invalid prop supplied to `Component` in React
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.
Quick fix
Fixes Warning: Failed prop type: Invalid prop supplied to `Component`
Warning: Failed prop type: Invalid prop `count` of type `string` supplied to `Counter`, expected `number`.- Check the warning message in the browser console
- Review your PropTypes definition
- Fix the prop type mismatch
- For component props, use PropTypes.elementType
Warning: Failed prop type: Invalid prop `count` of type `string` supplied to `Counter`, expected `number`.Warning: Failed prop type: Invalid prop supplied to `Component`
What this error means
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.
Typical symptoms
- Yellow warning appears in the browser console during development
- Warning message specifies the prop name and the component name
- Component may still render but behavior could be unexpected
- Warning disappears if you use TypeScript with proper type definitions
Common causes
- PropTypes definition doesn't match the actual prop being passed (e.g., PropTypes.number but passing a string)
- Using PropTypes.func when passing a JSX element instead of a component reference
- Passing undefined or null to a prop marked as required
- Using the wrong PropTypes validator for complex types (e.g., array vs object)
- Not using PropTypes.elementType for component props wrapped in React.memo
- Forgetting to import PropTypes from the 'prop-types' package
How to fix "Warning: Failed prop type: Invalid prop supplied to `Component`"
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
};Advanced notes
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.
Frequently asked questions
- What does "Warning: Failed prop type: Invalid prop supplied to `Component`" mean?
- 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.
- How do I fix "Warning: Failed prop type: Invalid prop supplied to `Component`"?
- 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.
- What causes "Warning: Failed prop type: Invalid prop supplied to `Component`"?
- PropTypes definition doesn't match the actual prop being passed (e.g., PropTypes.number but passing a string) Using PropTypes.func when passing a JSX element instead of a component reference Passing undefined or null to a prop marked as required
- Is the "Warning: Failed prop type: Invalid prop supplied to `Component`" error serious?
- It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.