react Architecture Docs
Home / File/ TodoItem.tsx — react Source File

TodoItem.tsx — react Source File

Architecture documentation for TodoItem.tsx, a tsx file in the react codebase. 4 imports, 1 dependents.

File tsx BabelCompiler Entrypoint 4 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  ecd0fab8_8cce_e1b2_b31c_d05de8663169["TodoItem.tsx"]
  a2e3768b_191e_9986_afcb_87f97e20160d["actions.ts"]
  ecd0fab8_8cce_e1b2_b31c_d05de8663169 --> a2e3768b_191e_9986_afcb_87f97e20160d
  1f7d2c0a_3bdd_0239_1534_920016f02d2b["deleteTodo"]
  ecd0fab8_8cce_e1b2_b31c_d05de8663169 --> 1f7d2c0a_3bdd_0239_1534_920016f02d2b
  26781e42_b3ef_80b4_30af_96eb0568dfb3["setTodoComplete"]
  ecd0fab8_8cce_e1b2_b31c_d05de8663169 --> 26781e42_b3ef_80b4_30af_96eb0568dfb3
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  ecd0fab8_8cce_e1b2_b31c_d05de8663169 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  c0c08439_2d95_7b70_f20b_1bbbbdc9a402["TodoList.tsx"]
  c0c08439_2d95_7b70_f20b_1bbbbdc9a402 --> ecd0fab8_8cce_e1b2_b31c_d05de8663169
  style ecd0fab8_8cce_e1b2_b31c_d05de8663169 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

'use client';

import {startTransition, useOptimistic} from 'react';
import {deleteTodo, setTodoComplete, type Todo as ITodo} from './actions';

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>
  );
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does TodoItem.tsx do?
TodoItem.tsx is a source file in the react codebase, written in tsx. It belongs to the BabelCompiler domain, Entrypoint subdomain.
What functions are defined in TodoItem.tsx?
TodoItem.tsx defines 1 function(s): TodoItem.
What does TodoItem.tsx depend on?
TodoItem.tsx imports 4 module(s): actions.ts, deleteTodo, react, setTodoComplete.
What files import TodoItem.tsx?
TodoItem.tsx is imported by 1 file(s): TodoList.tsx.
Where is TodoItem.tsx in the architecture?
TodoItem.tsx is located at fixtures/flight-parcel/src/TodoItem.tsx (domain: BabelCompiler, subdomain: Entrypoint, directory: fixtures/flight-parcel/src).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free