Why does "Cannot read property 'removeToDo' of undefined" error occur?

Question

React

App

import React, { context } from "react";
import ToDoList from "./Components/ToDo/ToDoList";
import ToggleToDo, { RemoveToDo } from "./context";

function App() {
  const [todos, setTodos] = React.useState([
    { id: 0, completed: true, title: "To Do List на React" },
    { id: 1, completed: false, title: "Портфолио на React" }
  ]);

  function toggleToDo(id) {
    setTodos(
      todos.map(todo => {
        if (todo.id === id) {
          todo.completed = !todo.completed;
        }
        return todo;
      })
    );
  }

  function removeToDo(id) {
    setTodos(todos.filter(todo => todo.id !== id));
  }

  return (
    <ToggleToDo.Provider value={{ toggleToDo }}>
      <RemoveToDo.Provider valuse={{ removeToDo }}>
        <div className="todo">
          <h1 className="todo__title">Today:</h1>
          <ToDoList todos={todos} />
        </div>
      </RemoveToDo.Provider>
    </ToggleToDo.Provider>
  );
}

export default App;

ToDoItem

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

function ToDoItem({ todo, index }) {
  const { toggleToDo } = useContext(ToggleToDo);
  const { removeToDo } = useContext(RemoveToDo);

  const classes = ["todo__item"];

  if (todo.completed) {
    classes.push("todo__item--checked");
  }

  return (
    <li className={classes.join(" ")}>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={toggleToDo.bind(null, todo.id)}
      />
      <strong>{index + 1}</strong>
      {todo.title}
      <button onClick={removeToDo.bind(null, todo.id)}>&times;</button>
    </li>
  );
}

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

export default ToDoItem;

Answer 1

Is that how it should be?