CODEWITHSUNDEEP
reactjstypescript
Tudor Apostol
Tudor Apostol

Reputation: 131

React + Typescript error

I've just started learning React and thought it might be a good idea to learn it alongside TS, but I've been getting this error, and couldn't find a solution on how to solve it.

[ts] Property 'todos' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ToDoList> & Readonly<{ children?: ReactNode; }> & ...'.

This is my code:

const TODOS: object[] =  [
    {
        id: 1,
        name: 'Todo 1'
    },
    {
        id: 2,
        name: 'Todo 2'
    }
]

const App: React.SFC = (): JSX.Element => {
    return (
        <ToDoList todos={TODOS}/>
    )
}

interface IProps {
    readonly todos: object[]
}

class ToDoList extends React.Component<{},IProps> {
    static props: IProps

    render() {
      return (
        <div>{this.props.todos.map((item: any) => {
            return <h1>item.name</h1>
        })}</div>
    )
}

}

export default App;

Is there something I'm missing ?

Upvotes: 1

Views: 98

Answers (2)

MistyK
MistyK

Reputation: 6232

The first generic argument is props and the second one is state. Change:

class ToDoList extends React.Component<{},IProps> {

to

class ToDoList extends React.Component<IProps,{}> {

Upvotes: 1

Titian Cernicova-Dragomir
Titian Cernicova-Dragomir

Reputation: 250256

The order of your generic parameters to React.Component is wrong, the first parameter should be the props. Change to 

class ToDoList extends React.Component<IProps> { }

If you don't use the second parameter you don't have to specify it.

Upvotes: 3

Related Questions