TodoItem() — react Function Reference

Architecture documentation for the TodoItem() function in TodoItem.tsx from the react codebase.

Function tsx BabelCompiler Entrypoint calls 2

Entity Profile

BabelCompiler→ Entrypoint→ TodoItem() — react Function Reference

Dependency Diagram

graph TD
  3c571e48_f75f_74ed_d20e_d5fa9cc70d2d["TodoItem()"]
  ecd0fab8_8cce_e1b2_b31c_d05de8663169["TodoItem.tsx"]
  3c571e48_f75f_74ed_d20e_d5fa9cc70d2d -->|defined in| ecd0fab8_8cce_e1b2_b31c_d05de8663169
  26781e42_b3ef_80b4_30af_96eb0568dfb3["setTodoComplete()"]
  3c571e48_f75f_74ed_d20e_d5fa9cc70d2d -->|calls| 26781e42_b3ef_80b4_30af_96eb0568dfb3
  1f7d2c0a_3bdd_0239_1534_920016f02d2b["deleteTodo()"]
  3c571e48_f75f_74ed_d20e_d5fa9cc70d2d -->|calls| 1f7d2c0a_3bdd_0239_1534_920016f02d2b
  style 3c571e48_f75f_74ed_d20e_d5fa9cc70d2d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/flight-parcel/src/TodoItem.tsx lines 6–37

export function TodoItem({
  todo,
  isSelected,
}: {
  todo: ITodo;
  isSelected: boolean;
}) {
  let [isOptimisticComplete, setOptimisticComplete] = useOptimistic(
    todo.isComplete,
  );

  return (
    <li data-selected={isSelected || undefined}>
      <input
        type="checkbox"
        checked={isOptimisticComplete}
        onChange={e => {
          startTransition(async () => {
            setOptimisticComplete(e.target.checked);
            await setTodoComplete(todo.id, e.target.checked);
          });
        }}
      />
      <a
        href={`/todos/${todo.id}`}
        aria-current={isSelected ? 'page' : undefined}>
        {todo.title}
      </a>
      <button onClick={() => deleteTodo(todo.id)}>x</button>
    </li>
  );
}