Как исправить ошибку "Property *** does not exists on type ''IntrinsicAttributes" в React+TypeScript?

Question

[kfedor]

Всем привет. Есть такой компонент:

import { AddTodoForm } from '../AddTodoForm/AddTodoForm';
import { TodoList } from '../TodoList/TodoList';
import { TodoListControls } from '../TodoListControls/TodoListControls';

interface ITodo {
  id: number;
  title: string;
  createdAt: string | null;
  updatedAt: string | null;
  isCompleted: boolean;
}

function App() {
  return (
    <div className='flex flex-col justify-center items-center bg-blue-200 h-screen'>
      <h1 className='text-2xl mb-4'>Список дел</h1>
      <div className='flex flex-col bg-gray-100 h-fit p-4 rounded-lg'>
        <div className=''>
          <AddTodoForm />
          <TodoListControls />
          <TodoList todos={todos} />
        </div>
      </div>
    </div>
  );
}

const todos: ITodo[] = [
  { id: 1, title: 'Приготовить яичницу', createdAt: '123', updatedAt: null, isCompleted: false },
  { id: 2, title: 'Съесть яичницу', createdAt: '124', updatedAt: null, isCompleted: false },
  { id: 3, title: 'Поработать', createdAt: '125', updatedAt: null, isCompleted: false },
  { id: 4, title: 'Поспать, createdAt: '126', updatedAt: null, isCompleted: false },
  { id: 5, title: 'Приготовить яичницу', createdAt: '127', updatedAt: null, isCompleted: false },
  { id: 6, title: 'Приготовить яичницу', createdAt: '111', updatedAt: null, isCompleted: false },
];

export default App;

При попытке передать todos в компонент TodoList возникает ошибка "Property todos does not exists on type ''IntrinsicAttributes". Что может быть не так, почему она возникает?

Answer 1

[Aetae]

Тебе английским по белому написано: "Property todos does not exists", что тут непонятно?

Твой компонент TodoList не ожидает пропа todos.