Intermediate
A reusable submit button with useFormStatus
Write a SubmitButton component that uses useFormStatus() from react-dom.
While its form is submitting, the button is disabled and says Saving.... Otherwise it shows its children (here Save).
Use <SubmitButton>Save</SubmitButton> inside the note form instead of the plain button. Keep id="save" on the <button> element.
What Check tests
SubmitButtonusesuseFormStatus- Before submitting, the button says
Saveand is enabled - Right after submitting, the button is disabled and says
Saving... - When saving ends, the note is listed and the button is back to
Save
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.