How to fix TypeError: this.state is not an object in React
This error occurs in React class components when attempting to access this.state before it has been properly initialized as an object. It typically happens when the constructor is missing, super(props) is not called, or state is set to null/undefined instead of an object.
Quick fix
Fixes TypeError: this.state is not an object
class MyComponent extends React.Component {
constructor(props) {
super(props); // This MUST come first
this.state = {
count: 0,
data: null
};
}
render() {
return <div>{this.state.count}</div>;
}
}- Add constructor with super(props)
- Initialize state as an object
- Fix event handler binding
- Check for early state access
class MyComponent extends React.Component {constructor(props) {super(props); // This MUST come firstthis.state = {count: 0,data: null};}render() {return <div>{this.state.count}</div>;}}TypeError: this.state is not an object
What this error means
This error indicates that React is trying to access the state property of a class component, but finds that this.state is not an object as expected. In React class components, this.state must always be an object (or null in specific scenarios). The error occurs when the JavaScript runtime attempts to read properties from this.state but discovers it's undefined, null, or some other non-object type. This typically happens during the component lifecycle, especially in the constructor, render method, or event handlers. React expects this.state to be properly initialized before any component methods try to read or update it. When the initialization chain is broken—usually by forgetting super(props) or not setting an initial state—the error surfaces immediately.
Typical symptoms
- Component crashes immediately on mount or first render
- Error occurs in constructor or render method
- Console shows "TypeError: this.state is not an object" or "Cannot read property of undefined"
- Class component fails to initialize properly
- setState calls fail with undefined errors
Common causes
- Missing super(props) call in the constructor, preventing proper component initialization
- No constructor defined and no state initialized, leaving this.state undefined
- State explicitly set to null or undefined instead of an object
- Accessing this.state before calling super(props) in the constructor
- Using this.state in event handlers where this context is lost due to improper binding
- Attempting to use class component patterns in functional components
How to fix "TypeError: this.state is not an object"
If your class component is missing a constructor, add one and ensure you call super(props) first:
class MyComponent extends React.Component {
constructor(props) {
super(props); // This MUST come first
this.state = {
count: 0,
data: null
};
}
render() {
return <div>{this.state.count}</div>;
}
}The super(props) call is essential because it invokes the parent React.Component constructor, which sets up this and makes this.props available.
Ensure this.state is always initialized as an object (even if empty):
// ✅ Good - state is an object
constructor(props) {
super(props);
this.state = {
items: []
};
}
// ❌ Bad - state is null
constructor(props) {
super(props);
this.state = null;
}
// ❌ Bad - state not initialized at all
constructor(props) {
super(props);
// Missing this.state = {}
}If you don't need any initial state, you can use an empty object: this.state = {}
If the error occurs in event handlers, ensure proper this binding using arrow functions or bind():
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
// Option 1: Bind in constructor
this.handleClick = this.handleClick.bind(this);
}
// Option 2: Arrow function (preferred)
handleChange = (e) => {
this.setState({ value: e.target.value });
}
// Traditional method needs binding
handleClick() {
console.log(this.state.value); // this will be undefined without binding
}
render() {
return (
<>
<input onChange={this.handleChange} value={this.state.value} />
<button onClick={this.handleClick}>Click</button>
</>
);
}
}Arrow functions automatically bind this to the component instance.
Ensure you're not accessing this.state before super(props):
// ❌ Bad - accessing this before super()
class MyComponent extends React.Component {
constructor(props) {
console.log(this.state); // Error! super() not called yet
super(props);
this.state = { count: 0 };
}
}
// ✅ Good - super() called first
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
console.log(this.state); // Now safe to access
}
}If you're starting a new component, consider using functional components with hooks instead:
// Modern approach - functional component with hooks
import { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const [data, setData] = useState(null);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}Functional components avoid the this.state initialization issues entirely and are the recommended approach for modern React development.
Advanced notes
Class Component Lifecycle: The React.Component base class sets up the component's internal state management. Without calling super(props), the base class constructor never runs, leaving this.state undefined. This is why super(props) must be the first statement in any constructor.
State as null: While React technically allows this.state to be null, it's an anti-pattern that can lead to errors. If you intentionally need a null state scenario, you should still initialize this.state as an object and store null values as properties: this.state = { data: null }.
Babel and class properties: If you're using modern JavaScript with Babel, you can use class property syntax to initialize state without a constructor:
class MyComponent extends React.Component {
state = { count: 0 }; // No constructor needed
render() {
return <div>{this.state.count}</div>;
}
}This syntax is transpiled to include the proper constructor and super() call automatically.
TypeScript considerations: In TypeScript, you can define state types explicitly, which helps catch these initialization errors at compile time:
interface MyState {
count: number;
data: string | null;
}
class MyComponent extends React.Component<{}, MyState> {
constructor(props: {}) {
super(props);
this.state = {
count: 0,
data: null
};
}
}Frequently asked questions
- What does "TypeError: this.state is not an object" mean?
- state is not an object as expected. state must always be an object (or null in specific scenarios). state but discovers it's undefined, null, or some other non-object type.
- How do I fix "TypeError: this.state is not an object"?
- This error occurs in React class components when attempting to access this.state before it has been properly initialized as an object. It typically happens when the constructor is missing, super(props) is not called, or state is set to null/undefined instead of an object.
- What causes "TypeError: this.state is not an object"?
- Missing super(props) call in the constructor, preventing proper component initialization No constructor defined and no state initialized, leaving this.state undefined State explicitly set to null or undefined instead of an object
- Is the "TypeError: this.state is not an object" error serious?
- Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.