Property "value" does not exist on type Readonly

Question

I am learning how to develop applications using React as front-end and spring as back-end. While developing a sample application, I encountered an error as follows:

       `(26,28): Property "value" does not exist on type 'Readonly<{}>`

This error is generated from my App.tsx file which contains the React Components definition in JSX. The class component with the state "value" is defined as follows.

class App extends React.component{
        constructor(props:any) {
             super(props);
             this.state = {
             value:[],
             isLoading:false
          };
       }
        ...
25      render(){
26        const value = this.state.value;
27        const isLoading = this.state.isLoading;
          ... 
    }
   }//End of Class*

I am not understanding what's wrong. Can someone please help me look at it in a different perspective so that this problem can be approached in a different manner?

Answer 1

Did you declare an interface for your state?

Take a look at Hello React and TypeScript which shows an example of using interfaces with React Components.

I suspect you're missing something like this:

interface IMyComponentProps {
    someDefaultValue: string
}

interface IMyComponentState {
    someValue: string
}

class App extends React.Component<IMyComponentProps, IMyComponentState> {
  // ...
}

Answer 2

could you please try this as follow.

class App extends React.component<{},any>{ //your code}