Skip to main content
Problem 8

Loading Save Button

EASYBUILD
React+2

Implement a save button in React + TypeScript. You are given a prop onSave(): Promise<void>. Render a button with data-testid="save-button". Initial state: text is "Save", button is enabled. On click: call onSave once, disable the button and show "Saving..." while pending, then show "Saved" for 1000ms, then revert to "Save" and re-enable. Clicks while saving must be ignored.

Requirements
  • Keep App as the default exported React component with the provided onSave prop.
  • Render a button with data-testid="save-button".
  • The initial button text must be Save and the button must be enabled.
  • Clicking the button must call onSave once, disable the button, and show Saving... while pending.
  • Clicks while saving must not call onSave again.
  • After onSave resolves, show Saved for 1000ms, then return to Save and re-enable the button.
Examples
Example 1
Input
User clicks the button once
onSave resolves after 200ms
Output
"Saving..." during the promise, then "Saved" for 1000ms, then "Save"
Constraints
  • onSave must be called at most once per click cycle — not again until the button re-enables
Follow-up

How would you display an error state if onSave rejects?

Hints
Related Practice
Track
React

Keep moving through related react problems and build a stronger search-friendly practice loop around this topic.

View track →
Problem 15
Controlled Form with Validation
easy
Problem 16
Add Error Handling and Retry to Data Fetcher
medium
Problem 17
Notification Tray
medium
Console output will appear here...