React: Property 'X' Does Not Exist On Type 'Readonly<{}>' - Bobbyhadz

# React: Property 'X' does not exist on type 'Readonly<{}>'

The React.js error "Property does not exist on type 'Readonly<{}>'" occurs when we try to access the props or state of a class component that 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.

App.tsxCopied!import React from 'react'; class App extends React.Component { constructor(props: any) { super(props); this.state = {value: ''}; // 👈️ uses state but we haven't typed it } handleChange = (event: any) => { this.setState({value: event.target.value}); }; render() { return ( <div><form>{/* ⛔️ Error: Property 'value' does not exist on type 'Readonly<{}>'.ts(2339) */}<input onChange={this.handleChange} type="text" value={this.state.value} /><button type="submit">Submit</button></form></div> ); } } export default App;

Notice that our class component has a value property in its state object.

The cause of the error is - we haven't typed the state object of the class, so if we try to access any property on the state object, we would get an error.

The same is the case for the props object - trying to access a property on the props object would cause an error if we don't explicitly type it.

# Using the React.Component generic

To solve the error, use the generic of the React.Component class as React.Component<PropsObject, StateObject>.

App.tsxCopied!import React from 'react'; // 👇️ we set the props to empty object and set the state to {value: string} class App extends React.Component<{}, {value: string}> { constructor(props: any) { super(props); this.state = {value: ''}; } handleChange = (event: any) => { this.setState({value: event.target.value}); }; render() { return ( <div><form> <input onChange={this.handleChange} type="text" // ✅ Everything works now value={this.state.value} /> <button type="submit">Submit</button></form></div> ); } } export default App; The code for this article is available on GitHub

We typed the value property on the state object in the class, so we are now able to access it as this.state.value.

We passed an empty object for the type of the props object because this class doesn't take any props.

# Disable type checking with the any type

If you don't know how to type the props or state objects and want to disable type checking, use the any type.

App.tsxCopied!import React from 'react'; // 👇️ type checking disabled for props and state class App extends React.Component<any, any> { constructor(props: any) { super(props); this.state = {value: ''}; } handleChange = (event: any) => { this.setState({value: event.target.value}); }; render() { return ( <div><form><input onChange={this.handleChange} type="text" value={this.state.value} /><button type="submit">Submit</button></form></div> ); } } export default App; The code for this article is available on GitHub

We used the any type when typing the props and state objects, which effectively turns off type checking.

Now you would be able to access any property on the this.props and this.state objects without getting a type-checking error.

# Explicitly type a props object

Here is an example of a class that also explicitly types the props object.

App.tsxCopied!import React from 'react'; // 👇️ type props as {name: string}, and state as {value: string} class App extends React.Component<{name: string}, {value: string}> { constructor(props: any) { super(props); this.state = {value: ''}; } handleChange = (event: any) => { this.setState({value: event.target.value}); }; render() { return ( <div><form><input onChange={this.handleChange} type="text" value={this.state.value} /><button type="submit">Submit</button></form><h1>{this.props.name}</h1></div> ); } } export default App; The code for this article is available on GitHub

We explicitly typed the props object of the App component to have a name property of type string. Now when you use the component, you would have to provide the name prop, e.g. <App name="James Doe" />.

# Additional Resources

You can learn more about using TypeScript with React by checking out the following tutorials:

• React.js: Property 'children' does not exist on type 'X'
• Property does not exist on type 'JSX.IntrinsicElements'