modular-redux-tutorial component ToDo

ToDo.js

import React, { useState } from "react";
import { ToDoItem } from "./ToDoItem";
import { addItem, useList } from "../redux/list";

export const ToDo = () => {
  const list = useList();
  const [text, setText] = useState("");

  const createNewToDoItem = () => {
    if (!text) return alert("Please enter text!");
    addItem({ text });
    setText("");
  };

  return (
    <div>
      <ul>
        {list.map(item => (
          <ToDoItem key={item.id} item={item} />
        ))}
      </ul>

      <input
        type="text"
        value={text}
        onChange={e => setText(e.target.value)}
        onKeyPress={e => e.key === "Enter" && createNewToDoItem()}
      />
      <button onClick={createNewToDoItem}>{" + "}</button>
    </div>
  );
};