React - How to define props with typescript

Question

I have a demo here

It a simple todo app in React using typescript.

I'm trying to define the props in typescript.

I have an interface in the Todo component for the props being passed in

If I try to access text in the Todo component I get an error saying

Property 'text' does not exist on type 'string'.

How do I define the props correctly using typescript

Answer 1

You're defining todo as a string, but you're using it as an object that contains a text property as a string. Therefore, you props definition should be like this:

interface IProps {
  index: number,
  todo: { text: string }
}