Fix TypeError: Cannot read properties of undefined (reading 'setState') in React

This error occurs when an event handler loses its `this` binding in a class component, making `this` undefined when the handler fires. In function components a similar issue arises when the handler function is stale or incorrectly referenced. Fix it by using arrow functions, binding in the constructor, or converting to a function component with hooks.

Reading the Stack Trace

Here's what each line means:

• at handleSubmit (webpack-internal:///./src/components/LoginForm.tsx:18:10): handleSubmit tries to call this.setState at line 18, but this is undefined because the method lost its binding.
• at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:4164:14): React's synthetic event system invokes the handler, but the function's this context is not bound to the class instance.
• at executeDispatch (node_modules/react-dom/cjs/react-dom.development.js:9032:3): The event dispatch mechanism calls the handler without preserving the class instance context.

Common Causes

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { email: '' };
  }

  handleSubmit(e) {
    e.preventDefault();
    this.setState({ submitted: true });
  }

  render() {
    return <form onSubmit={this.handleSubmit}><button>Submit</button></form>;
  }
}

class Parent extends React.Component {
  handleClick(id) {
    this.setState({ selected: id });
  }

  render() {
    return <Child onClick={this.handleClick} />;
  }
}

const { handleSubmit } = new LoginForm(props);
// handleSubmit is now unbound, calling it loses `this`

The Fix

Convert handleSubmit to a class property arrow function. Arrow functions capture the `this` value from the enclosing scope (the class instance), ensuring it is always correctly bound regardless of how the method is called.

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { email: '' };
  }

  handleSubmit(e) {
    e.preventDefault();
    this.setState({ submitted: true });
  }

  render() {
    return <form onSubmit={this.handleSubmit}><button>Submit</button></form>;
  }
}

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { email: '', submitted: false };
  }

  handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    this.setState({ submitted: true });
  };

  render() {
    return <form onSubmit={this.handleSubmit}><button>Submit</button></form>;
  }
}

Testing the Fix

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

describe('LoginForm', () => {
  it('renders the submit button', () => {
    render(<LoginForm />);
    expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
  });

  it('does not crash on form submission', () => {
    render(<LoginForm />);
    const form = screen.getByRole('button', { name: 'Submit' }).closest('form')!;
    expect(() => fireEvent.submit(form)).not.toThrow();
  });

  it('handles submit event correctly', () => {
    render(<LoginForm />);
    const form = screen.getByRole('button', { name: 'Submit' }).closest('form')!;
    fireEvent.submit(form);
    // Component should update state without crashing
    expect(screen.getByRole('button')).toBeInTheDocument();
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/react-event-handler-error,git add src/components/LoginForm.tsx src/components/__tests__/LoginForm.test.tsx,git commit -m "fix: convert handleSubmit to arrow function for correct this binding",git push origin fix/react-event-handler-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 event handlers work with correct binding.
2. Open a pull request with the arrow function conversion.
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 event handling works in staging.

Frequently Asked Questions