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

Answer 2

You need to use interface to define your props. Take a look at the example below:

import * as React from 'react'    

interface IProps {
   name: string
   isActive?: boolean
}

const MyAwesomeComponent: React.FC<IProps> = ({name, isActive})=> (
    <p>Hello {name}. Your status is {isActive ? 'active': 'inactive'}</p>
)

name is required but not isActive