Worked solutions 02 · Component contracts

A. Build a responsibility

A small explicit contract is enough:

type AvailabilityProps = { places: number };
function Availability({ places }: AvailabilityProps) {
  return <p>{places === 0 ? 'Currently full' : `${places} fictional places`}</p>;
}

Zero produces Currently full; seven produces 7 fictional places. The data boundary should already reject negative counts. This component does not need to store the sentence, since it is derived from places. Place it inside the card after the event heading. Define it outside the parent component.

B. Repair the caller

Use <Availability places={0} />. Quoted “0” is a string, whereas braces evaluate the numeric expression. Restore the number prop type so the next incorrect caller is caught. places && ... evaluates to zero when places is zero; JSX can render that number. An explicit boolean such as places > 0 or the conditional expression above expresses the intended UI.

C. Transfer

One possible contract is { location: string; note?: string }. Render the location in a paragraph and conditionally show a nonempty note. There is no independently changing choice, so no state is required. An optional value needs an absence case. Grouping a venue’s meaningful information is a coherent responsibility; splitting every word would add interfaces without clarifying behavior. Verify heading order remains h1 for the page and h2 for event cards, with venue prose below it.