Context API todo app

import React from "react";
import ReactDOM from "react-dom";
const ToDoContext = React.createContext();
class ToDoList extends React.Component {
  state = {
    list: [],
    todo: ""
  };
  createNewToDoItem = () => {
    this.setState(({ list, todo }) => ({
      list: [
        ...list,
        {
          todo: todo
        }
      ],
      todo: ""
    }));
  };

  deleteItem = indexToDelete => {
    this.setState(({ list }) => ({
      list: list.filter((ToDoList, index) => index !== indexToDelete)
    }));
  };

  handleInput = e => {
    this.setState({
      todo: e.target.value
    });
  };

  render() {
    return (
      <ToDoContext.Provider
        value={{ list: this.state.list, deleteItem: this.deleteItem }}
      >
        <div>
          <h1>Simple To-Do App</h1>
          <div>
            <input
              type="text"
              value={this.state.todo}
              onChange={this.handleInput}
              onKeyPress={this.handleKeyPress}
            />
            <button onClick={this.createNewToDoItem}>ADD</button>
          </div>
        </div>

        {this.props.children}
      </ToDoContext.Provider>
    );
  }
}

class ToDoItems extends React.Component {
  render() {
    return (
      <ToDoContext.Consumer>
        {({ list, deleteItem }) =>
          list.map((item, key) => {
            return (
              <div key={key}>
                {item.todo}
                <button onClick={deleteItem.bind(this, key)}>REMOVE</button>
              </div>
            );
          })
        }
      </ToDoContext.Consumer>
    );
  }
}

function App() {
  return (
    <div className="App">
      <ToDoList>
        <ToDoItems />
      </ToDoList>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);