Fix Readonly<{}> State Errors in React TypeScript

You will learn why an untyped React class component gets an empty state type in TypeScript, how to declare its state shape, and how to type form event handlers safely. By the end, you can build controlled form inputs with this.state.value without the Readonly<{}> error.

React class components are generic: React.Component<Props, State>. TypeScript needs to know both the props shape and the state shape.

When you write this:

class App extends React.Component {
  // ...
}

no state type is supplied. React's default state type is effectively an empty object ({}). React also exposes state as Readonly<State> so component code cannot directly mutate it. Therefore, TypeScript sees:

this.state // Readonly<{}>

An empty object type has no known value property, so this.state.value is rejected.

The assignment in the constructor does not reliably define the component's TypeScript state type. Instead, explicitly declare the shape of state and provide it to React.Component.

interface AppState {
  value: string;
}

class App extends <{}, > {
  
}

Think of a TypeScript type as a label on a storage box.

• this.state is the box holding the component's changing data.
• React.Component<{}, {}> labels that box as empty.
• Trying to read this.state.value is like asking for a compartment named value in a box labelled “contains no known compartments.”
• Defining AppState changes the label to say: “This box has a value compartment containing text.”

Readonly is a safety seal on the box. You may inspect its contents, but you must use React's setState delivery process to replace or update them.

Declare interfaces (or type aliases) for props and state, then pass them to React.Component<Props, State>.

import React from "react";

interface AppProps {}

interface AppState {
  value: string;
}

class App extends React.Component<AppProps, AppState> {
  state: AppState = {
    value: "",
  };

  handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ value: event.target.value });
  };

  handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    alert(`A name was submitted: `);
  };

  () {
     (
      
    );
  }
}

  ;

Use this small example:

state = { value: "" };

handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  this.setState({ value: event.target.value });
};

Suppose the user types Ada.

1. On the first key press, the browser changes the input's temporary value to A.
2. React calls handleChange and provides an event.
3. event.target.value is "A".
4. this.setState({ value: "A" }) schedules a state update.
5. React renders again. this.state.value is now "A", so the input receives value="A".
6. The same cycle repeats for d and a; state ends as { value: "Ada" }.

Typed class component state is useful whenever a component owns changing UI data, including:

• Login forms: email, password, validation messages, and a submitting flag.
• Search pages: query text, loading status, API results, and request errors.
• Profile editors: initial data fetched from an API and fields the user can change.
• Shopping carts: selected quantities, coupon code, and checkout status.
• Admin dashboards: filter values, selected records, and pagination state.

For API-driven forms, state commonly includes both user input and request state:

interface ProfileState {
  name: string;
  loading: boolean;
  error: string | null;
}

Using explicit types makes it clear which values may be absent, which are strings, and which states the UI must handle.

In production code, class component state is usually typed as a named interface and initialized as a class field. This keeps the component contract close to its implementation.

interface SearchState {
  query: string;
  loading: boolean;
  error: string | null;
}

class SearchForm extends React.Component<{}, SearchState> {
  state: SearchState = {
    query: "",
    loading: false,
    error: null,
  };

  handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const query = this.state.query.trim();
    if (!query) {
      this.setState({ error: "Enter a search term." });
      return;
    }

    this.({ : , :  });

     {
      
    }  {
      .({ :  });
    }  {
      .({ :  });
    }
  };
}

Omitting the state generic

class App extends React.Component {
  state = { value: "" };
}

This can leave TypeScript with the default empty state type. Declare React.Component<Props, State>.

class App extends React.Component<{}, AppState> {
  state: AppState = { value: "" };
}

Mutating state directly

// Incorrect
this.state.value = "New value";

Direct mutation bypasses React's update flow. Use:

this.setState({ value: "New value" });

Using any for events

// 1. Describe props and state
interface Props {}
interface State {
  value: string;
}

// 2. Supply the generic types
class App extends React.Component<Props, State> {
  // 3. Initialize state
  state: State = { value: "" };

  // 4. Type an input change event
  handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ value: event.target.value });
  };

  // 5. Type a form submit event
  handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(this.state.);
  };
}

Why is React state shown as Readonly in TypeScript?

React types state as read-only to discourage direct mutation. Update it through setState, which lets React schedule rendering correctly.

Why does this.state = { value: "" } not fix the type error?

It creates a runtime value, but the class declaration still has the default state type unless you provide React.Component<Props, State> or another explicit state type.

What does {} mean in React.Component<{}, AppState>?

It means this component expects no props with known fields. It is the props type, not the state type.

Should I use object instead of {} for empty props?

Usually use a named empty interface such as interface AppProps {} for readability. In many codebases, Record<string, never> is used when you specifically want to prevent arbitrary props, but an empty props interface is sufficient for this example.

Do I need to type React events?

TypeScript can sometimes infer them in inline callbacks, but named handlers benefit from explicit types such as React.ChangeEvent<HTMLInputElement> and React.FormEvent<HTMLFormElement>.

• React class components — The API that uses props, state, lifecycle methods, and setState.
• TypeScript generics — React.Component<Props, State> uses generics to describe component data.
• TypeScript interfaces and type aliases — Used to define the shape of props and state.
• Controlled components — Form inputs whose displayed values are controlled by React state.
• React event types — Types such as ChangeEvent and FormEvent make event handlers safe.
• State immutability — Explains why state should be updated through React APIs rather than mutated.
• React hooks and useState — The common modern alternative to stateful class components.