Why doesn't it let you hang a callback on the react component?

Question

React

I have such an application with a card where I add tasks.
https://codepen.io/Gleblq/pen/PoNjKZW
The idea is that when you click on the "delete" button (this is when we have already added tasks to the card), a callback to the deleteTaskHandler () function, which is located in card component. But when I try to add tasks to the card, an error occurs ('Uncaught TypeError: Cannot read property 'deleteTaskHandler' of undefined'). I don't understand why it doesn't let me attach a callback function to this component. If I display the Task Components separately, not through the .map function , then everything works correctly.
Please share your ideas)

Answer 1

taskList.map(function(item) {
  return (
    <Task data_text={item.text} key={item.id} delete={this.deleteTaskHandler}/>
  )
})

The context is lost, respectively, this.deleteTaskHandler- this is not a component method.

onCLick={this.props.deleteTaskHandler()}

There is a typo in the name of the event handler.
Why deleteTaskHandler, if you pass to a component instance delete?
And why are you trying to call it (do not you understand the difference between a function and the result of its call?)?