Show the invoice due date
React · React · intermediate · greenfield
Adds the DueDate component: parses the API date and renders it in the user's locale format. Displays correctly in manual testing.
Users are spread across US, EU and Asia timezones. A due date is a calendar date, not a moment in time.
Requirements
- Render the invoice due date from the billing API's `isoDate` field (a date-only string like `2026-03-15`).
- The rendered date must be the stored calendar date for every user, in every timezone.
- Format as e.g. `Mar 15, 2026`; no date libraries.
Files touched
- src/components/DueDate.jsx
--- src/components/DueDate.jsx
+export function DueDate({ isoDate }) {
+ const due = new Date(isoDate);
+ return (
+ <span className="due-date">
+ {due.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" })}
+ </span>
+ );
+}