Error coming when using the state value in react using typescript

Question

In one of the codes in react documentation, the value defined in this.state is used in render() as

{this.state.name}

But when I implement that react code using typescript, it is giving error as:-

Property 'age' does not exist on type 'Readonly<{}>'.

The code in the typescript is:-

import * as React from "react";
class App2 extends React.Component{
    constructor(props:any)
    {
        super(props)
         this.state = {
            age : 0,
            name : "rohit"
        };
    }

    public render()
    {
        return(
                <h1>
                    {this.state.name}
                </h1>
        )
    }
}
export default App2;

Zbigniew Zagórski · Accepted Answer · 2018-07-17 09:53:03Z

2

When using Typescript you must provide types for props you accept and state of your class, so you shouldn't derive from plain React.Component (which defaults to React.Component<{}, {}> but instead declare template parameter to prop / state types you desire.

Stg like this should work for your case:

interface MyProps {
    something?: string;
}
interface MyState {
    age: 0;
    name: string;
}
class App2 extends React.Component<MyProps, MyState> {

```

answered Jul 17, 2018 at 9:53

Zbigniew Zagórski

2,0011 gold badge15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error coming when using the state value in react using typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related