Fix Warning: Failed prop type: Invalid prop `count` of type `string` supplied to `StatCard`, expected `number`. in React

This warning fires when a component receives a prop whose type does not match the defined PropTypes or TypeScript interface. The component may render incorrectly or produce subtle bugs. Fix it by passing the correct type from the parent, or by coercing the value at the component boundary and updating the type definitions to match actual usage.

Reading the Stack Trace

Here's what each line means:

• at StatCard (webpack-internal:///./src/components/StatCard.tsx:5:3): StatCard received a string for the count prop but expects a number, causing the PropTypes validation warning.
• at Dashboard (webpack-internal:///./src/pages/Dashboard.tsx:22:7): Dashboard is the parent component passing the wrong type for the count prop to StatCard.
• at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18): React checks PropTypes during rendering in development mode and logs the warning.

Common Causes

export default function Dashboard() {
  const [stats, setStats] = useState({ count: '0' });
  useEffect(() => {
    fetch('/api/stats').then(r => r.json()).then(setStats);
  }, []);
  return <StatCard count={stats.count} />;
}

export default function Settings() {
  const [limit, setLimit] = useState('10');
  return (
    <>
      <input value={limit} onChange={e => setLimit(e.target.value)} />
      <StatCard count={limit} />
    </>
  );
}

const rawCount = searchParams.get('count') as unknown as number;
return <StatCard count={rawCount} />;

The Fix

Convert the API response value to a number using Number() before storing it in state. This ensures the StatCard always receives the correct type and eliminates the PropTypes warning.

export default function Dashboard() {
  const [stats, setStats] = useState({ count: '0' });
  useEffect(() => {
    fetch('/api/stats').then(r => r.json()).then(setStats);
  }, []);
  return <StatCard count={stats.count} />;
}

export default function Dashboard() {
  const [stats, setStats] = useState({ count: 0 });
  useEffect(() => {
    fetch('/api/stats')
      .then(r => r.json())
      .then(data => setStats({ count: Number(data.count) }));
  }, []);
  return <StatCard count={stats.count} />;
}

Testing the Fix

import { render, screen } from '@testing-library/react';
import StatCard from './StatCard';

describe('StatCard', () => {
  it('renders count as a number', () => {
    render(<StatCard count={42} />);
    expect(screen.getByText('42')).toBeInTheDocument();
  });

  it('does not trigger prop type warnings', () => {
    const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
    render(<StatCard count={42} />);
    expect(spy).not.toHaveBeenCalledWith(
      expect.stringContaining('Failed prop type')
    );
    spy.mockRestore();
  });

  it('renders zero correctly', () => {
    render(<StatCard count={0} />);
    expect(screen.getByText('0')).toBeInTheDocument();
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/react-prop-types-error,git add src/pages/Dashboard.tsx src/components/StatCard.tsx src/components/__tests__/StatCard.test.tsx,git commit -m "fix: convert API count to number before passing to StatCard",git push origin fix/react-prop-types-error

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --coverage
      - run: npm run build

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

npm install bugstack-sdk

import { initBugStack } from 'bugstack-sdk'

initBugStack({ apiKey: process.env.BUGSTACK_API_KEY })

Deploying the Fix (Manual Path)

1. Run the test suite locally to confirm no prop type warnings appear.
2. Open a pull request with the type conversion fix.
3. Wait for CI checks to pass on the PR.
4. Have a teammate review and approve the PR.
5. Merge to main and verify the component renders correctly in staging.

Frequently Asked Questions