4

I have simple code as follows:

/types.ts

export type TodoType = {
  id: String
  task: String
  completed: Boolean
}

/components/Todo.tsx

import { TodoType } from '../types'

type TodoProps = {
  todoData: TodoType
}

const Todo = ({ todoData: { task } }: TodoProps) => {
  return <div>{task}</div>
}

export default Todo

/pages/index.tsx

import Todo from '../components/Todo'
import {TodoType} from '../types'

const Index = () => {
  const { data, isLoading } = useQuery('todos', todosQuery)

  if (isLoading) return <p>Loading ...</p>

  return (
    <div>
      {data.todos.map((todo: TodoType) => (
        <Todo key={todo.id} todoData={todo} />
      ))}
    </div>
  )
}
export default Index

I keep on getting this following error: https://i.stack.imgur.com/AmYoo.png

(property) Attributes.key?: Key | null | undefined

Type 'String' is not assignable to type 'Key | null | undefined'.ts(2322)

The expected type comes from property 'key' which is declared here on type 'IntrinsicAttributes & TodoProps'

any idea how to fix this?

parampampam
  • 77
  • 1
  • 7
  • 6
    `String` and `Boolean` should be `string` and `boolean`. See https://www.typescriptlang.org/docs/handbook/2/everyday-types.html – Phil May 15 '22 at 03:45
  • Does this answer your question? [What is the difference between types String and string?](https://stackoverflow.com/q/14727044/283366) – Phil May 15 '22 at 03:52
  • It fixed my problem. Thanks! – parampampam May 15 '22 at 04:13

0 Answers0