todo.js

import React from 'react'
import qoreContext from "../qoreContext";

export default function Todo() {
  const items = qoreContext.views.allTodo.useListRow();
  const {
    insertRow,
    status,
  } = qoreContext.views.allTodo.useInsertRow();
  const inputRef = React.useRef(null);
  return (
    <>
      <section class="todoapp">
        <header class="header">
          <h1>todos</h1>
          <input
            ref={inputRef}
            onKeyPress={async (e) => {
              if (e.key === "Enter" && status !== 'loading') {
               const value = e.currentTarget.value
                inputRef.current.value = "";
                await insertRow({
                  name: value,
                  description: "",
                  done: false,
                });
              }
            }}
            class="new-todo"
            placeholder="What needs to be done?"
            autofocus
          />
        </header>
        <section class="main">
          <ul class="todo-list">
            {(items.data || []).map((item) => (
              <li key={item.id} class={item.done && "completed"}>
                <div class="view">
                  <input class="toggle" type="checkbox" checked={item.done} />
                  <label>{item.name}</label>
                  <button class="destroy"></button>
                </div>
                <input class="edit" value="Create a TodoMVC template" />
              </li>
            ))}
          </ul>
        </section>
      </section>
    </>
  );
}