Composing Components

Build a page from parts

Header, list, and footer can each be components assembled in App.

function App() {
  return (
    <>
      <Header />
      <TodoList />
      <Footer />
    </>
  );
}

Children prop

Wrap content and receive it as children for flexible layouts.

function Card({ children }) {
  return <section className="card">{children}</section>;
}

<Card>
  <h2>Note</h2>
  <p>Reusable shell.</p>
</Card>

Pass callbacks down

Parents often pass event handlers so children stay presentational.

<TodoItem todo={todo} onToggle={toggleTodo} onDelete={deleteTodo} />

Folder habits

Group related components in folders under src/components as the project grows.