Property value does not exist on type Readonly

Question

I need to create a form that will display something based on the return value of an API  I m working with the following code   class App extends React Component     constructor props        super props       this state    value            this handleChange   this handleChange bind this       this handleSubmit   this handleSubmit bind this          handleChange event        this setState  value  event target value           handleSubmit event        alert  A name was submitted      this state value     error here     event preventDefault           render         return          lt form onSubmit  this handleSubmit  gt           lt label gt            Name             lt input type  text  value  this state value  onChange  this handleChange    gt     error here          lt  label gt           lt input type  submit  value  Submit    gt         lt  form gt                 I m getting the following error    error TS2339  Property  value  does not exist on type  Readonly lt    gt      I got this error in the two lines I commented on the code  This code isn t even mine  I got it from the react official site  https   reactjs org docs forms html   but it isn t working here   Im using the create-react-app tool

User · Answer

event target is of type EventTarget which doesn t always have a value  If it s a DOM element you need to cast it to the correct type   handleChange event        this setState  value   event target as HTMLInputElement  value        This will infer the  correct  type for the state variable as well though being explicit is probably better

User · Answer

According to the official ReactJs documentation  you need to pass argument in the default format witch is  P         default for your props S         default for yout state  interface Component lt P       S      gt  extends ComponentLifecycle lt P  S gt       Or to define your own type like below   just an exp  interface IProps       clients  Readonly lt IClientModel   gt        onSubmit   data  IClientModel    gt  void     interface IState      clients  Readonly lt IClientModel   gt      loading  boolean     class ClientsPage extends React Component lt IProps  IState gt                typescript and react whats react component P S mean how to statically type react components with typescript

User · Answer

interface MyProps            interface MyState     value  string    class App extends React Component lt MyProps  MyState gt                Or with hooks  something like  const App        MyProps    gt      const  value  setValue    useState lt string gt                 type s are fine too like in  nitzan-tomer s answer  as long as you re consistent

User · Answer

The Component is defined like so   interface Component lt P       S      gt  extends ComponentLifecycle lt P  S gt        Meaning that the default type for the state  and props  is      If you want your component to have value in the state then you need to define it like this   class App extends React Component lt       value  string   gt                Or   type MyProps            type MyState     value  string    class App extends React Component lt MyProps  MyState gt

User · Answer

I suggest to use for string only state values export default class Home extends React Component lt        key  string   string   gt       for string key and any type of state values export default class Home extends React Component lt        key  string   any  gt       for any key   any values export default class Home extends React Component lt        key  any   any  gt

User · Answer

If you don t want to pass interface state or props model you can try this class App extends React Component  lt any  any gt

User · Answer

The problem is you haven t declared your interface state replace any with your suitable variable type of the  value   Here is a good reference  interface AppProps        code related to your props goes here    interface AppState      value  any    class App extends React Component lt AppProps  AppState gt

[reactjs] Property 'value' does not exist on type 'Readonly<{}>'

Examples related to reactjs

Examples related to typescript