Menu
js error "Property does not exist on type 'Readonly<{}>'" occurs when we try to access the props or state of a class component which we haven't typed. To solve the error, use the generic on the React. Component class to type the props or state objects of the class. Here is an example of how the error occurs.
Props is simply an abbreviation for properties. In React, we utilize props to send data from one component to another (from a parent component to a child component or multiple children components). They come in handy when you want the data flow in an app to be dynamic.
The setState() Method State can be updated in response to event handlers, server responses, or prop changes. This is done using the setState() method. The setState() method enqueues all of the updates made to the component state and instructs React to re-render the component and its children with the updated state.
The Component is defined like so:
interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }
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<{}, { value: string }> {
...
}
Or:
type MyProps = { ... };
type MyState = { value: string };
class App extends React.Component<MyProps, MyState> {
...
}
interface MyProps {
...
}
interface MyState {
value: string
}
class App extends React.Component<MyProps, MyState> {
...
}
// Or with hooks, something like
const App = ({}: MyProps) => {
const [value, setValue] = useState<string>('');
...
};
type's are fine too like in @nitzan-tomer's answer, as long as you're consistent.
If you don't want to pass interface state or props model you can try this
class App extends React.Component <any, any>
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<AppProps, AppState> {
// ...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With