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
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 }
}
Error: Objects are not valid as a React child (found: object with keys {text, isComplete}). If you meant to render a collection of children, use an array instead.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
