JIYIK CN >

The React.js error “Property does not exist on type 'Readonly<{}>'” occurs when we try to access the props or state of an untyped class component. To fix the error, you need to use generics on the React.Component class to type the props or state object of that class.

Below is an example of where the error occurs.

import React from 'react';

class App extends React.Component {
  constructor(props: any) {
    super(props);

    this.state = {value: ''}; // Using state, but we didn't enter it
  }

  handleChange = (event: any) => {
    this.setState({value: event.target.value});
  };

  render() {
    return (
      <div>
        <form>
          {/*
            ⛔️ Error:
            Property 'value' does not exist on type 'Readonly<{}>'.ts(2339)
          */}
          <input
            onChange={this.handleChange}
            type="text"
            value={this.state.value}
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default App;

Notice that our class component has a value property in its state object.

The reason for the error is – we have not entered the state object of the class, so if we try to access any property of the state object, we will get an error.

The same is true for the props object - if we don't explicitly type it, trying to access a property on the props object will result in an error.

To resolve this error, you need to use React.Componentgenerics for the class React.Component<PropsObject, StateObject>.

import React from 'react';


// We set props to an empty object and state to {value: string}
class App extends React.Component<{}, {value: string}> {
  constructor(props: any) {
    super(props);

    this.state = {value: ''};
  }

  handleChange = (event: any) => {
    this.setState({value: event.target.value});
  };

  render() {
    return (
      <div>
        <form>
          <input
            onChange={this.handleChange}
            type="text"
            // ✅ Everything is working fine now
            value={this.state.value}
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default App;

We typed the value property on the state object in our class, so we can now access it as this.state.value .

We pass an empty object for the type of the props object since this class doesn't accept any props.

If we don't know how the props or state objects will be typed and want to disable type checking, use the any type.

import React from 'react';

// 👇️ Disable type checking for props and state
class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props);

    this.state = {value: ''};
  }

  handleChange = (event: any) => {
    this.setState({value: event.target.value});
  };

  render() {
    return (
      <div>
        <form>
          <input
            onChange={this.handleChange}
            type="text"
            value={this.state.value}
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default App;

We used the any type when typing the props and state objects, which effectively turned off type checking.

Now we can access any property on the this.props and this.state objects without getting type checking errors.

Here is an example of a class that also explicitly types the props object.

import React from 'react';

// 👇️ type props as {name: string}, and state as {value: string}
class App extends React.Component<{name: string}, {value: string}> {
  constructor(props: any) {
    super(props);

    this.state = {value: ''};
  }

  handleChange = (event: any) => {
    this.setState({value: event.target.value});
  };

  render() {
    return (
      <div>
        <form>
          <input
            onChange={this.handleChange}
            type="text"
            value={this.state.value}
          />
          <button type="submit">Submit</button>
        </form>

        <h1>{this.props.name}</h1>
      </div>
    );
  }
}

export default App;

We explicitly typed the props object of the App component to have a name property of type string. Now, when we use the component, we must provide a name property, for example <App name="James Doe" />.

To resolve the React.js error "Property does not exist on type 'Readonly<{}>'", make sure to explicitly type the class's props or state object, adding any properties we intend to access on the props or state object