TodoList.jsx

// TodoInput.jsx
const TodoInput = () => {
  const [textInput, setTextInput] = React.useState("");

  function onTextChange(e) {
    setTextInput(e.target.value);
  }
  return (
    <input className="new-todo" value={textInput} onChange={onTextChange} />
  );
};

const TodoList = () => (
  <TodoStoreConsumer>
    {store => (
      <ul className="todo-list">
        {store.todos.map(todo => (
          <li>
            <TodoItem {...todo} />
          </li>
        ))}
      </ul>
    )}
  </TodoStoreConsumer>
);