Ошибка: "Тип '{}' пропускает следующие свойства из типа

Question

Я делаю список дел и получаю эту ошибку "Тип" {id: номер; текст: строка;} 'отсутствуют следующие свойства из типа "Реквизиты": item, handleDelete ". Я не знаю, как это исправить. Спасибо

от App.tsx

import React, { useState } from 'react'
import TodoComponent from './TodoComponent'

interface Todo {
    id: number
    text: string
}

function App() {
    const [inputText, setInputText] = useState<string>('')
    const [todoArray, setTodoArray] = useState<Array<Todo>>([{ id: 0, text: '' }])
    const [count, setCount] = useState<number>(1)

    const handleClick = () => {
        if (inputText !== '') setCount(count + 1)
        setTodoArray([...todoArray, { id: count, text: inputText }])
        setInputText('')
    }

    const handleDelete = (id: number) => {
        console.log('click', id)
    }

    return (
        <div>
            <input type="text" value={inputText} onChange={e => setInputText(e.target.value)} />
            <button onClick={handleClick}>Add</button>

            {todoArray.map(item => {
                return <TodoComponent {...item} {...handleDelete}/>
            })}
        </div>
    )
}

export default App

от TodoComponent.tsx

import React from 'react'

interface Props {
    item: {id: number, text: string}
    handleDelete: (id: number) => void
}

function TodoComponent(todo: Props) {
    return (
        <div>
            {todo.item.text}
            {todo.item.text !== '' && <button onClick={() => todo.handleDelete(todo.item.id)}>x</button>}
        </div>
    )
}

export default TodoComponent

Answer 1

Вы должны передать реквизит следующим образом:

{todoArray.map(item => {
            return <TodoComponent item={item} handleDelete={handleDelete} />
})}