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?

Please change your title to describe the problem or question, not your project. — takendarkk, Feb 19 '18 at 15:41

score 37 · Accepted Answer · edited Apr 12 '21 at 14:53

37

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> {
  // ...
}

edited Apr 12 '21 at 14:53

Robin Rodricks

110,798
141
398
607

answered Feb 19 '18 at 16:12

Anthony N

973
7
9

2

Thanks a lot, All I had to do was React.Component<{},any> instead of React.Component. But got the idea from this post... Thanks again. – MVG Mar 02 '18 at 06:28
https://stackoverflow.com/questions/52167263/why-my-object-from-import-let-is-readonly-react-js?noredirect=1#comment91288499_52167263 Any suggestion for this – Nikola Lukic Sep 05 '18 at 08:43

score 6 · Answer 2 · answered Apr 27 '20 at 04:47

6

could you please try this as follow.

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

answered Apr 27 '20 at 04:47

Kelum Sampath Edirisinghe

1,156
12
21

score 3 · Answer 3 · answered Jul 26 '19 at 04:45

    export default class ReactTodoWebpart extends React.Component<IReactTodoWebpartProps,any> {
  /**
   *
   */
  constructor(props:IReactTodoWebpartProps) {
    super(props);
    this.state={
      todoItems:[]
    };
    this.props.todoClient.getItems().then(resolvedItems=>{
      this.setState({
        todoItems: resolvedItems,

      })
    });

  }
// I also face this issue and fixed it by using any in the second argument

Property "value" does not exist on type Readonly

3 Answers3