Property does not exist on type Readonly { }

Question

I am getting the following error:

"Property 'items' does not exist on type 'Readonly<{}>'." and "Property 'value' does not exist on type 'Readonly<{}>'."

I am trying to create "Add comment where you can upvote and downvote". Also when I refresh the page, the item which is added, is not available anymore.

The following code is using React with typescript:

Abc.tsx:


  export default class Abc extends React.Component{

constructor{

}
handleChange(event){

}

addItem(){

  })
  this.setState({items:itemsCopy, value:''});
}




 render(){
   return(
    <div>
      <input value={this.state.value} onChange={this.handleChange.bind(this)} />
      <button onClick = {() => this.addItem()}>Submit</button>
      <PostList postList = {this.state.items} 
                updateScore = {this.updateScore.bind(this)}
                removeItem = {this.removeItem.bind(this)}/>
    </div>
  );
  }
}

Answer 1

To answer the first part of your question, you will need to explicitly define the typings for your component's state. You can do so by writing an interface for it.

interface AbcState {
  items: any[]; //replace any with suitable type
  value: string;
}

export default class Abc extends React.Component<{}, AbcState> {
 // the rest

}

As for the issue of data not being persisted, the local component state does not store any data beyond its lifecycle. You can either save the data in your database, or cache it in your local storage.