const TodoInput = props => {
  let todo;
  return (
    <AppConsumer>
      {({ addTodo }) => (
        <form
          onSubmit={e => {
            e.preventDefault();
          }}
        >
          <Input
            type="text"
            id="todoInput"
            onChange={e => {
              todo = e.target.value;
            }}
            placeholder="type todo here"
          />
          <Button
            type="submit"
            onClick={() => {
              if (todo) {
                addTodo(todo);
                const inputEl = document.getElementById("todoInput");
                inputEl.value = "";
              }
            }}
          >
            Add Todo
          </Button>
        </form>
      )}
    </AppConsumer>
  );
};