React + Typescript error

Question

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 ?

Titian Cernicova-Dragomir · Accepted Answer · 2018-04-16 12:11:20Z

3

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.

answered Apr 16, 2018 at 12:11

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

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

Comments

MistyK · Accepted Answer · 2018-04-16 12:12:01Z

1

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,{}> {

answered Apr 16, 2018 at 12:12

MistyK

6,2825 gold badges48 silver badges81 bronze badges

Collectives™ on Stack Overflow

React + Typescript error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related