Compose small contracts into useful interfaces

First, build a mental model

A component is a function with a UI contract. Props are its inputs; children let a caller choose content while the component owns a useful structural responsibility.

1. Pass data down through props; do not mutate props.
2. Use children to reuse layout without hard-coding every content variant.
3. An event prop reports intent to the parent.
4. Choose a component boundary around responsibility, not every few lines of markup.

function Panel({ title, children }) {
  return <section aria-label={title}><h2>{title}</h2>{children}</section>;
}
function ItemRow({ item, onChoose }) {
  return <button onClick={() => onChoose(item.id)}>{item.name}</button>;
}
// <Panel title='Inventory'><ItemRow item={item} onChoose={selectItem} /></Panel>

1. Parent

   The parent supplies data and decides what selecting an item means.

2. Row

   The row renders the current item and reports a selection event.

3. Panel

   The panel owns its semantic wrapper while accepting arbitrary content.