Cannot read property 'bind' of undefined. React.js как исправить?

Question

[MiracleLive]

Выдается такая ошибка TypeError: Cannot read property 'bind' of undefined , только начинаю пользоваться реактом , поэтому пока не могу понять , что именно не так , VSCODE не ругается на какие-либо синтаксические ошибки

import React, { useContext } from "react";
import PropTypes from "prop-types";
import Context from "../ToDo/context";

const styles = {
  li: {
    display: "flex",
    justifyContent: "space-between",
    alignItmes: "center",
    padding: ".5rem 1rem",
    border: "1px solid #ccc",
    borderRadius: "4px",
    marginBottom: ".5rem",
  },
  input: {
    marginRight: "1rem",
  },
};

function ToDoItem({ todo, index, onChange }) {
  const { removeTodo } = useContext(Context);
  const classes = [];
  if (todo.completed) {
    classes.push("done");
  }
  return (
    <li style={styles.li}>
      <span className={classes.join(" ")}>
        <input
          type="checkbox"
          checked={todo.completed}
          style={styles.input}
          onChange={() => onChange(todo.id)}
        />
        <strong>{index + 1}</strong>
        &nbsp;
        {todo.title}
      </span>

      <button className="rm" onClick={removeTodo.bind(null, todo.id)}>
        &times;
      </button>
    </li>
  );
}

ToDoItem.propTypes = {
  todo: PropTypes.object.isRequired,
  index: PropTypes.number,
  onChange: PropTypes.func.isRequired,
};

export default ToDoItem;

Comments

[Вадим]

А Вы уверены что в Context у Вас объект, одно из свойство которого removeTodo и это функция?

[G F]

В ошибке нет ничего react-specific.

VSCODE не ругается на какие-либо синтаксические ошибки

Поэтому люди и пишут на ts.

[tervizator]

Тут проблемы не в не знании реакта, а в не знании самого js
useContext так не юзают
Попробуйте сначало разобраться с методами жизненного цикла для классовых компонент, с ними будет проще и в дальнейшем придет не большое понимание :)

Answer 1

[Влад]

Сделайте компонент-класс и избавьтесь от бинда, подключив babel и создав функцию стрелку.