Почему не дает повесить callback на компонент react?

Question

[Алексей]

Имею вот такое вот приложение с карточкой, где добавляю задачи.
https://codepen.io/Gleblq/pen/PoNjKZW
Идея такая, что при нажатии на кнопку "удалить" (это когда уже мы добавили в карточку таски), из компонента Task должен вернуться callback на функцию deleteTaskHandler(), которая находится в компоненте Card. Но при попытке добавления тасков в карточку происходит ошибка ('Uncaught TypeError: Cannot read property 'deleteTaskHandler' of undefined') .не понимаю почему он мне не дает повесить callback функцию на данный компонент.Если выводить Компоненты Task отдельно, не через функцию .map, то все работает корректно.
Прошу поделиться своими идеями)

Answer 1

[0xD34F]

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

Теряется контекст, соответственно, this.deleteTaskHandler - это не метод компонента.

onCLick={this.props.deleteTaskHandler()}

Опечатка в имени обработчика события.

Почему deleteTaskHandler, если передаёте в экземпляр компонента delete?

А вызывать вы его зачем пытаетесь (не понимаете разницы между функцией и результатом её вызова?)?

Comments

[Алексей]

Да, опечатка случайная, исправил. Идея в том, что при клике на кнопку, в функцию будет передаваться id таска, и уже в родительском компоненте будет удаляться данный таск и все нарисуется снова
Делал я по примеру как тут ( https://medium.com/@jmuse/%D0%BF%D0%B5%D1%80%D0%B5... ), но тут конечно проще немного сделано, нету вывода через функцию и .map
А как мне тогда можно callback-функцию привязать к компоненту Task?

[0xD34F]

Да, опечатка случайная, исправил.

Какую из? Круглые скобки убрали - да. Привели в соответствие снаружи и внутри компонента имена prop'а, через который получаете обработчик удаления - да. Заменили "onCLick" на "onClick" - нет.

А как мне тогда можно callback-функцию привязать к компоненту Task?

Что значит "как"? Я же уже указал на ваши косяки - исправляйте. Непонятно что? Хорошо, подскажу ещё немного, разберитесь: ключевое слово this - когда какие значения принимает; функции - в чём разница между обычными и стрелочными.