How to fix Type of prop does not match expected type in React

What this error means

This error appears in two main contexts in React development: when using PropTypes for runtime validation or when using TypeScript for compile-time type checking. In PropTypes-based projects, this manifests as a console warning in development mode when a prop's actual type doesn't match its PropTypes definition. For example, passing a string "123" when PropTypes.number is expected will trigger this warning. In TypeScript projects, this is a compile-time error that prevents your code from building. TypeScript checks that every prop passed to a component matches its type definition exactly. This can occur with basic type mismatches (string vs number), missing required props, or incompatible complex types (objects, arrays, unions). The error serves as a safety mechanism to catch bugs early—before they reach production—by ensuring components receive the correct data types they're designed to handle. While PropTypes only warns at runtime in development, TypeScript prevents compilation entirely, making it a more robust solution for type safety.

Typical symptoms

• Console warning: "Failed prop type: Invalid prop `propName` of type `X` supplied to `ComponentName`, expected `Y`"
• TypeScript compiler error preventing build from completing
• Component receives data but behaves unexpectedly due to type coercion
• ESLint warnings about missing prop validation
• Props marked as required but not provided, causing undefined errors
• Runtime errors when component tries to use prop methods that don't exist on the wrong type

Common causes

1. Passing a string where a number is expected (e.g., "42" instead of 42)
2. Passing a number where a string is expected
3. Omitting required props when rendering a component
4. Passing null or undefined to a prop that expects a specific type
5. Providing an object with wrong shape or missing properties
6. Passing a function with incorrect signature
7. Using incompatible union types (passing a type not in the union)
8. Passing an array when a single value is expected, or vice versa
9. Type inference failures in complex generic components
10. Missing PropTypes definitions for used props

How to fix "Type of prop does not match expected type"

Failed prop type: Invalid prop `count` of type `string`
supplied to `Counter`, expected `number`

Type 'string' is not assignable to type 'number'

import PropTypes from 'prop-types';

function Counter({ count }) {
  return <div>Count: {count}</div>;
}

Counter.propTypes = {
  count: PropTypes.number.isRequired, // Expects number
};

interface CounterProps {
  count: number; // Expects number
}

function Counter({ count }: CounterProps) {
  return <div>Count: {count}</div>;
}

<Counter count="42" />  {/* String instead of number */}

<Counter count={42} />  {/* Number */}

const countStr = "42";
<Counter count={Number(countStr)} />
// or
<Counter count={parseInt(countStr, 10)} />

<Counter count={maybeCount ?? 0} />

Counter.propTypes = {
  count: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]).isRequired,
};

interface CounterProps {
  count: string | number;
}

interface CounterProps {
  count?: number; // Optional with ?
}

// Or with PropTypes:
Counter.propTypes = {
  count: PropTypes.number, // Not required
};

interface User {
  id: number;
  name: string;
  email: string;
}

// Missing email property
<UserCard user={{ id: 1, name: "John" }} />

<UserCard user={{ id: 1, name: "John", email: "john@example.com" }} />

Counter.propTypes = {
  user: PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    email: PropTypes.string.isRequired,
  }).isRequired,
};

Advanced notes

Frequently asked questions

What does "Type of prop does not match expected type" mean?

This error appears in two main contexts in React development: when using PropTypes for runtime validation or when using TypeScript for compile-time type checking. In PropTypes-based projects, this manifests as a console warning in development mode when a prop's actual type doesn't match its PropTypes definition. number is expected will trigger this warning.

How do I fix "Type of prop does not match expected type"?

This error occurs when a React component receives a prop whose type does not match the expected type definition, either through PropTypes validation or TypeScript type checking. It indicates a mismatch between what the component expects and what is actually being passed.

What causes "Type of prop does not match expected type"?

Passing a string where a number is expected (e.g., "42" instead of 42) Passing a number where a string is expected Omitting required props when rendering a component

Is the "Type of prop does not match expected type" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• Props undefined after render

  How to fix "Props undefined after render" in React

  MEDIUM

• Prop spreading could cause security issues

  Prop spreading could cause security issues

  HIGH

• Warning: Props should not change between renders

  Props should not change between renders

  MEDIUM

• Too many component layers with prop drilling

  How to fix "Too many component layers with prop drilling" in React

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation