Intermediate
A typed sign-up form
Finish the profile form. Write parseProfile(form: FormData): Profile | null: it reads the fields name and age, returns null if the name is empty (after trimming) or the age is missing or not a number, and otherwise a Profile.
Then type the submit handler's event as SubmitEvent<HTMLFormElement> (import it from react), call event.preventDefault(), and set the message to Saved Asha (21) for valid data or Invalid otherwise.
The checks use #name, #age, #save and #message, and the function name parseProfile.
What Check tests
- Your code has no type errors
- parseProfile can return null or a Profile
- Its result cannot be used as a Profile without a null check
- A valid form shows "Saved Asha (21)"
- An empty name shows "Invalid"
- A missing age shows "Invalid"
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.